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内 容 提 要 
本 书 针对 目前 最 主流 的 移动 应 用 三 大 平台 (iOS、Android 和 Windows Phone) 的 特点 以 及 时 下 最 普 
的 两 大 类 移动 产品 的 规格 和 需求 ， 为 大 家 系统 地 前 述 了 设计 移动 应 用 的 方法 、 步 骤 以 及 其 中 的 诸多 细节 。 
本 书 适合 移动 设计 人 员 、 开 发 人 员 和 产品 经 理 阅 读 。 
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对 于 大 多 数 移动 应 用 的 开 友 痢 来 况 ， 三 大 移动 应 用 平台 的 App 商店 中 成 干 上 万 个 已 经 存在 的 应 用 本 
身 丈 是 一 个 很 大 的 挑战 和 压力 。 此 外 ， 各 大 移动 应 用 平台 以 及 移动 产品 制造 商 陆 续 推 出 的 层出不穷 的 新 技 
术 、 新 观念 和 新 创意 ， 也 不 断 地 更 新 着 移动 用 户 的 使 用 万 式 和 购买 趋势 。 蛙 靠 开 友人 人员， 到 怕 很 难 设计 制 
作出 更 加 吸引 人 的 移动 应 用 产品 。 在 这 里 ， 我 们 从 一 个 设计 师 的 角度 ， 与 大 家 分 享 如何 塑 造 与 众 不 同 、 独 
树 一 帜 以 及 元 满 个 性 和 创新 的 应 用 。 


本 书 特点 


本 书 由 从 事 了 多 年 移动 应 用 设计 的 用 户 体验 设计 师 与 移动 开发 技术 专家 联手 编写 ， 针 对 目前 最 主流 的 
移动 应 用 三 大 平台 (iOS、Android 和 Windows Phone ) 的 特点 以 及 时 下 最 普及 的 两 大 类 移动 产品 ( 手 
机 和 平板 电脑 ) 的 规格 和 需求 ， 为 大 家 系统 地 阐述 了 设计 移动 应 用 的 方法 、 步 又 以 及 其 中 的 诸多 细节 。 

同时 ， 为 了 使 大 家 在 阅读 本 书 时 更 加 简单 、 有 条 理 ， 我 们 以 用 户 体 验 设 计 的 基本 流程 为 线 素 ， 按 部 就 
班 、 循 序 渐进 地 为 大 家 逐一 曾 述 做 好 各 个 环节 设计 工作 的 方法 、 要 点 以 及 规范 和 禁 鼠 ， 使 大 家 在 设计 自己 
作品 的 时 候 ， 不 但 明确 设计 思路 ， 而 且 清 晰 自己 所 处 的 设计 环节 ， 做 到 统 观 全 局 、 有 的 放 矢 。 大 体 上 ， 用 
户 体 验 设计 流程 可 以 分 成 原型 草图 阶段 〈 低 保 真 阶段 入 中 保 真 阶段 和 高 保 真 阶段 。 保 真 度 这 个 术语 实际 
上 描述 的 是 你 的 移动 产品 完成 的 详细 程度 。 

低 保 真 阶段 包括 了 项 目的 前 期 规划 、 市 场 定位 、 需 求 分 析 及 个 性 方向 等 。 由 于 这 个 阶段 以 完成 应 用 的 
原型 草图 为 目的 ， 我 们 也 称 之 为 应 用 设计 的 原型 草图 阶段 。 
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中 保 真 阶段 是 使 用 软件 把 充满 了 各 种 思路 和 丰 晤 创 总 的 原型 对 图 在 电脑 上 完整 地 呈现 出 来 ， 并 通过 可 
用 性 测试 不 断 地 进行 调整 和 细 化 ， 达 到 功能 完善 、 布 局 和 跳 转 合 理 的 目的 。 

高 保 真 阶段 是 中 保 真 阶段 不 断 调 整 的 结果 ， 达 到 了 可 以 交付 编程 人 员 进 入 编程 阶段 的 标准 ， 同 时 加 入 
了 界面 上 的 个 性 化 处 理 以 及 包括 图 标 在 内 的 所 有 细节 设计 。 

无 论处 在 设计 流程 中 的 哪 一 个 阶段 ， 都 会 有 很 多 相对 应 的 设计 环节 和 规范 要 点 ， 这 对 于 我 们 合理 地 规 
划 项 目 进 度 和 制订 项 目 计 划 很 有 帮助 ， 也 能 使 设计 思路 更 加 清晰 、 合 理 。 


本 书 读者 对 象 


本 书面 同 所 有 准备 进行 移动 应 用 设计 与 开 友 的 人 和 团队 ， 以 及 所 有 想 要 改进 和 创新 移动 应 用 的 人 或 团 
队 。 针 对 不 同 疯 位 的 读者 ， 我 们 做 出 如 下 解释 。 


移动 设计 初学 者 。 本 书 可 以 帮助 你 从 零 开始 逐步 成 长 为 专业 、 全 面 的 用 户 体验 设计 人 员 ， 或 是 移 
动 界 面 设计 师 。 书 中 包括 如 何 把 握 目 己 的 成 长 万 向 ， 收 集 目 己 的 工作 素材 和 资料 ， 应 该 继续 了 解 
哪 方 面 的 和 识 ， 以 及 进行 哪些 训练 。 

企业 家 。 当 今 ， 移 动 设 备 已 经 逐渐 取代 电视 机 、 收 育 机 和 平面 广告 ， 成 为 最 重要 的 媒体 平台 。 能 
人 百 通 过 完美 的 用 尸体 验 设计 为 你 的 企业 在 这 个 平台 上 占据 一 局 之 地 意义 重大 ， 而 我 们 的 书 可 以 帮 
助 你 组 建 更 加 专业 的 用 户 体验 团队 。 

设计 师 。 本 书 是 一 本 非常 实用 的 参考 书 和 工具 书 ， 专 业 的 设计 人 员 可 以 从 中 了 解 最 全 面 、 最 科学 
的 用 尸体 验 设计 理论 和 万 法 。 同 时 ， 本 书 还 可 以 帮助 你 在 不 同 的 设计 领域 中 迅速 转型 ， 拓 苋 你 的 
设计 业务 范围 。 

开发 人 员 。 学 完 本 书 以 后 ， 你 将 不 再 是 一 名 传统 意义 上 的 单纯 技术 类 的 开 友 人 员 。 本 书 中 的 知识 
将 有 效 地 帮助 你 开阔 视野 ， 增 进 你 与 设计 人 员 和 规划 、 领 导 层 的 沟通 、 协 作 和 能 力 。 同 时 ， 你 的 工 
作 领 域 也 会 得 到 扩 序 ， 成 为 名 副 其 实 的 多 面 手 。 

产品 经 理 。 本 书 会 有 效 地 提高 你 对 移动 产品 的 个 性 要 求 和 审美 格调 。 在 与 设计 师 和 开 友 人 员 一 起 
工作 的 时 候 ， 你 的 建议 将 更 加 有 说 服 力 。 同 时 在 项 目 寺 论 中 ， 你 可 以 参与 的 沁 围 将 更 加 全 面 且 更 
具 原 则 性 。 

质量 保障 人 员 。 对 已 经 成 型 的 移动 应 用 进行 评审 或 测试 时 ， 你 会 友 现 这 是 一 本 很 有 价值 的 参考 书 
和 工具 书 。 

销售 与 客服 。 了 解 用 户 体 验 设 计 中 的 专业 要 求 和 用 户 需求 分 析 ， 将 会 使 我 们 的 工作 更 加 和 专业， 以 
及 有 具有 更 强 的 说 服 力 。 同 时 ， 本 书 还 有 助 于 我 们 在 产品 讨论 会 上 提出 有 价值 的 意见 。 


中 


本 书 网 站 


为 了 更 好 地 为 广大 读者 提供 服务 ， 我 们 专门 为 本 书 建立 了 一 个 网 站 http:/www.uepook1.com ， 大 家 
可 以 从 中 查看 相关 出 版 进度 ， 并 对 书 中 内 容 发 表 评 论 ， 提 出 宝贵 意见 


勘误 与 支持 


我 们 在 网 站 http://www.uebook1.com 中 建立 了 一 个 勘误 专区 ， 及 时 地 把 书 中 的 问题 、 失 误 和 纠 
正 反 馈 给 广大 读者 。 如 果 你 友 现 了 问题 ， 可 以 在 网 上 留言 ， 也 可 以 友 送 电子 邮件 到 2005bigfish@163. 
com， 我 们 会 在 第 一 时 间 回 复 你 。 此 外 ， 你 也 可 以 在 新 滔 微 博 中 与 我 们 联系 ， 我 们 的 微 博 为 @ 大 羽 
bigfish 和 @tony_ 关 东升 。 
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做 好 准备 了 吗 一 一 了 解 移动 平台 和 移动 应 用 


我 们 要 做 的 , 不 是 传统 的 设计 ; 我 们 面 对 的 , 不 是 平 单 的 用 户 ; 我 们 想 要 成 为 的 , 也 不 是 普通 的 设计 师 。 
很 多 人 询问 过 我 : 我 想 设计 一 个 移动 应 用 ， 应 该 怎样 入 手 ? 用 什么 软件 ? 看 些 什 么 资料 ? …… 面 对 这 些 问 
题 ， 我 确实 有 些 犯 难 。 并 不 是 我 没 法 回答 他 们 ， 而 是 这 些 问 题 反 映 出 他 们 对 移动 应 用 设计 实在 是 一 无 所 知 。 
我 们 要 清楚 ， 为 移动 平台 设计 应 用 程序 ， 绝 不 是 心血 来 潮 、 想 做 就 做 的 事情 。 如 果 仪 仪 是 为 了 填补 一 下 自 
己 的 设计 业务 领域 的 空白 ， 或 是 满足 一 下 目 己 “IT 时 代 ”的 时 尚 情怀 ， 那 还 是 省 省 吧 。 

真正 地 面 对 一 个 成 熟 的 应 用 设想 或 一 个 实 实在 在 的 项 目 时 ， 我 们 需要 考虑 的 绝 不 是 上 述 的 这 些 问 
题 。 你 的 应 用 将 要 在 什么 平台 上 运行 ? 在 什么 设备 上 安 法? 面 对 什 么 样 的 用 户 群体 ? 这 个 应 用 到 底 能 给 
hr 我 们 所 面 对 的 工作 ， 绝 不 仅仅 是 针对 视 贡 和 感官 上 的 设计 ， 而 是 移动 应 用 的 用 户 体验 
设计 。 想 要 得 到 完美 的 设计 结果 ， 也 绝 不 是 普通 的 设计 师 能 够 做 到 的 ， 我 们 将 要 成 为 的 是 一 名 用 户 体验 
设计 师 。 

你 做 好 准备 了 吗 ? 


= 


1.1 成 为 用 尸体 验 设 计 师 


每 当 我 们 打开 手机 或 平板 电脑 ， 看 着 一 球 球 精美 时 尚 、 高 效 实用 的 应 用 产品 的 时 候 , 心里 不 免 会 感慨 : 
这 要 是 我 的 作品 该 多 好 啊 ! 然而 ， 每 个 精彩 的 移动 应 用 背后 ， 都 需要 完成 大 量 的 工作 ， 经 历 烦 瑛 的 步 又 ， 
耗费 相当 多 的 时 间 和 精力 。 曲 靠 一 个 人 的 工作 几乎 不 可 能 ， 大 部 分 情况 下 都 是 一 个 长 全 多 个 团队 的 合作 。 
在 本 证 中 ， 我 们 系统 介绍 一 下 用 户 体 验 设 计 的 工作 。 
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1.1.1 UI、ID、UE 和 GUI1， 这 学 都 是 什么 


在 网 页 和 应 用 设计 领域 中 ， 我 们 经 常会 听 到 人 们 用 这 些 英 文 缩写 描述 设计 工作 ， 那 么 它们 各 自 代 表 什 
么 含义 ? 有 具体 的 工作 、 方 向 和 区 别 是 什么 呢 ? 
下 面 让 我 们 先 来 看 看 它们 的 英文 全 称 和 基本 概念 。 
。 Ul (User Interface )。 用 户 界面 设计 , 是 指 对 应 用 软件 的 操作 逻辑 、 人 机 交互 、 界 面 的 整体 设计 。 
从 20 世纪 80 年 代 起 ， 用 户 界 面 设计 成 为 了 计算 机 科学 的 正式 学 科 。 在 设计 理念 上 ，U| 设计 不 仅 
是 让 软件 变 得 有 个 性 、 有 品味 ， 还 要 让 软件 的 操作 变 得 舒适 、 简 单 、 自 由 ， 充 分 体现 软件 的 定位 
和 特点 。 
。 |D (Interaction Design )。 交 互 设 计 , 又 称 互 动 设 计 , 它 考虑 的 是 人 、 环 境 与 设备 的 关系 和 行为 ， 
以 及 传达 这 种 行为 的 元 素 的 设计 。 这 个 解释 有 点 难 懂 。 简 单 地 说 ， 我 们 进行 交互 设计 ， 就 是 为 了 
让 产品 更 易 用 、 有 效 ， 让 人 使 用 产品 时 感到 舒适 。 同 时 ， 它 需要 了 解 用 户 和 他 们 的 期 望 ， 了 解 用 
户 在 同 产品 交互 时 彼此 的 行为 ,以 及 “人 ”本 身 的 心理 和 行为 特点 。 交 互 设计 还 涉及 人 体 工程 学 、 
心理 学 、 生 物 学 等 多 个 学 科 ， 以 及 与 多 领域 人 员 的 沟通 。 
。 UE (User Experience )。 用 户 体验 设计 ， 它 要 求 设计 师 能 够 全 面 地 分 析 和 体察 用 户 在 使 用 某 
个 系统 时 的 感受 。 他 的 工作 从 开发 的 最 早期 开始 ， 并 贯穿 始终 。 目 的 是 保证 用 户 对 产品 的 体验 有 
正确 的 预 估 ， 了 解 用 户 的 真实 期 望 和 目的 ， 并 对 功能 核心 设计 进行 修正 ， 保 证 功能 核心 同人 机 界 
面 之 间 的 协调 工作 。 
。 GUI (Graphical User Interface )。 图形 用 户 界面 设计 ， 是 指针 对 采用 图 形 方 式 显 示 的 操作 环 
境 用 户 接口 进行 设计 。 其 实 就 是 界面 美工 ， 只 关心 界面 的 美观 和 有 关 视 觉 方面 的 设计 工作 。 
从 上 面 各 项 设计 工作 的 概念 来 看 ，U| 的 概念 比较 广 ， 包 含 了 软 硬 件 设 计 ， 也 圳 括 其 他 各 项 设计 的 部 
分 内 涵 。 而 GUI 设计 比 UI 设计 稍 窄 。 目 前 ,国内 大 部 分 UI 设计 师 其 实 做 的 是 GUI， 他 们 大 多 出 自 美术 
院 校 。 简 单 地 讲 ，ID 设计 只 是 指 人 和 电脑 之 间 的 互动 过 程 ， 目 前 一 般 是 软件 工程 师 在 做 。 而 UE 设计 从 简 
单 理解 上 ,关注 的 是 用 户 的 行为 习惯 和 心理 感受 ,就 是 琢磨 人 会 怎么 用 软件 或 者 硬件 才 觉 得 得 心 应 手 。 但 是 ， 
有 关 用 户 体验 这 一 课题 的 确切 定义 、 框 架 及 其 要 素 还 在 不 断 发 展 和 革新 。 
下 面 我 们 通过 一 则 国外 的 UE 设计 师 招聘 要 求 ， 看 看 现在 的 用 户 体验 设计 师 需 要 处 理 的 工作 内 容 ( 如 
1-1 所 示 )。 
面 对 这 份 招聘 启事 ， 我 和 大 家 有 同感 ， 它 的 业务 跨度 相当 大 ， 条 件 也 近乎 于 苛刻 ， 不 是 吗 ?” 我 们 不 但 
要 了 解 编程 工作 , 还 要 善于 图 形 设计 ; 不 但 要 有 组 织 和 测试 能 力 , 还 要 善于 沟通 ; 不 但 要 掌握 各 种 图 像 软 件 ， 
还 得 是 个 绘画 、 制 图 的 高 手 。 看 来 ， 想 要 成 为 真正 的 用 户 体验 设计 师 比 想象 得 要 难 一 些 。 但 是 我 们 仔细 分 
析 一 下 ， 不 难得 出 一 个 结论 ， 未 来 的 用 户 体验 设计 师 就 是 要 具备 界面 设计 、 交 互 设计 、 图 形 美术 设计 及 以 


用 户 为 中 心 的 原型 和 体验 设计 于 一 身 的 全 能 型 设计 人 才 。 这 也 是 我 们 为 本 书 选 


要 从 零 开 始 伴随 大 家 逐步 成 为 用 户 体 验 设 计 师 。 


图 1-1 
UE 设计 师 招 聘 要 求 


第 1 章 做 好 准备 了 吗 一 一 了 解 移动 平台 和 移动 应 用 


我 们 正在 寻找 一 名 高 级 用 户 体验 设计 师 加 A 入 产品 设计 团队 ,负责 产品 创新 .界面 视觉 引导 以 及 
原型 设计 , 并 与 开发 一 起 推动 设计 实现 ,我 们 需要 你 可 以 独立 工作 , 和 团队 成 员 合 作 , 交流 各 种 想 


法 , 男 出 原型 ,参与 产品 整个 周期 . 


日 常 的 工作 包括 : 


久 基于 人 机 交互 . 图形 化 设计 . 界面 设计 和 其 
他 相关 理论 进行 设计 。 

鸟 画 出 不 同 层 次 的 原型 纸 上 的 . 框架 的 . 可 
交互 的 网 页 以 及 Flash 的 。 

人 镶 到 不 同 的 部 门 演示 概念 和 想法 组织 反 馈 
意见 ， 

久 生成 视觉 元 素 , 比如 icon. 边框 . 用 户 控件 . 
窗口 规范 和 图 形 化 的 布局 。 

仿 同 产品 设计 团队 合作 去 发 展 一 些 重 要 的 . 
有 附加 值 的 概念 .以 及 修订 产品 。 

包 同 商业 方面 的 专家 . 市 场 部 沟通 , 确认 设计 
并 得 到 认可 。 

使 同 开 发 人 员 沟 通 ， 提 供 明确 的 定义 和 执行 
的 方向 。 

岛 同 质量 控制 部 门 沟通 ， 提供 在 测试 阶段 需 
要 的 清晰 理解 。 

久 同 首 席 设计 师 和 产品 设计 团队 一 起 工作 . 
使 其 设计 符合 内 部 设计 流程 和 标准 ， 

镶 需要 1/710 的 时 间 出 差 ， 


1.1.2 了 解 成 功 的 用 户 体验 设计 案例 


无 论 你 是 售 真 的 做 好 准备 成 为 一 名 用 户 体验 设计 师 ， 现 在 我 们 都 需要 先 放松 一 下 ， 深 吸 一 口气 ， 用 心 
地 观摩 几 款 成 功 的 移动 应 用 用 尸体 验 设计 案例 。 


趣 ， 以 及 对 它 设 计 理 念 的 深入 理解 都 是 非常 有 帮助 的 。 
下 面 我 们 先 为 大 家 介绍 iOS 平台 的 Passbook， 如 图 1-2 所 示 。 


目 从 iOS 6 一 友 布 ， Passbook 融 以 它 独 特 的 文 付 功能 和 超凡 的 用 户 体验 设计 博得 了 大 众 的 眼球 。 
它 是 苹果 公司 于 2012 年 6 月 12 日 在 全 球 开 友 者 大 会 (WWDC ) 上 宣布 的 ， 并 在 iOS 6 系统 上 提供 操 
这 是 一 款 可 以 存放 优惠 券 、 会 员 卡 和 电影 票 
卡 和 礼品 卡 等 。 这 些 票 据 将 被 显示 在 锁 屏 屏幕 上 ， 


作 的 一 个 全 新 应 用 。j 


包括 电影 票 、 登 机 牌 、 积 分 


这 对 于 我 们 加 深 对 这 


的 移动 应 用 。 


久 在 应 用 程序 的 变 互 设计 方面 (界面 设计 和 
产品 设计 ) 有 45 年 的 工作 经 验 ， 在 Web 
应 用 和 桌面 应 用 方面 有 扎实 的 经 验 ， 

久 设计 . 人 机 交互 . 可 用 性 相关 专业 ,或 者 具 
有 展示 对 设计 的 理解 .交互 设计 理论 和 实 
践 的 能 力 ， 

名 理解 产品 设计 的 生命 周期 。 

怨 优秀 的 交流 技巧 ， 书 写 和 口头 ， 

久 了 解 基于 浏览 器 和 客户 端的 技术 【HTML . 
Jawa .Flash 和 .NET}. 

总 原型 技术 . 包 插 DHTML .Crearmweaver 和 
Flash 等 ， 

久 具有 开发 和 运行 可 用 性 测试 的 经 验 。 

咏 具有 行业 研究 经 验 (Cooper 的 目标 导向 设 
计 方 法 忧 先 ) 。 

岛 无 论 是 独立 工作 还 是 和 团队 一 起 , 都 可 以 
使 用 设计 过 程 描述 , 清楚 问题 如 何 产生 以 
到 如 何 解决 。 

久 可 以 创造 出 图 形 元 素 ; icon、 控件 . 窗口 
边框 和 数据 布局 ， 


文 | ] 学 科 的 认识 ， 提 高 我 们 研究 它 的 兴 


题 的 原因 ， 我 们 的 目标 束 是 


尼 整 合 了 来 目 各 类 服务 的 票据 ， 
当 用 户 走 到 相 天 商店 或 场所 
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附近 时 ， 通 过 定位 功能 ， 对 应 的 票据 将 会 目 动 显示 。 在 这 个 大 多 数 印 刷 品 都 开始 数码 化 的 年 代 ， 使 用 电子 
优惠 券 或 电子 机 票 其 实 是 很 平常 的 事 。 


iOS 6 
Passbook 
UE 设计 图 例 


1-2 
iOS 平台 的 Passbook 


Passbook 的 另 一 个 独特 功能 在 于 ， 它 能 够 自动 显示 附近 商家 的 会 员 卡 和 优惠 券 等 信息 。 例 如 ， 当 
你 经 过 必胜客 时 ，Passbook 束 会 弹出 一 条 信息 ， 提 醒 你 必胜客 就 在 附近 ， 你 可 以 使 用 相关 的 必胜客 优 
惠 券 和 礼券 等 。 此 外 ， 它 还 支持 各 种 信息 的 实时 更 新 ， 如 果 登 机 牌 上 的 航班 出 现 延迟 ， 它 会 自动 通知 你 。 
如 果 你 不 想 使 用 Passbook 清理 某 一 种 电子 票 卷 ， 那 么 也 可 以 随心 所 欲 地 将 这 些 电 子 票 卷 从 Passbook 
里 “销毁 。 

我 们 为 大 家 介绍 的 第 二 蒜 应 用 是 著名 的 微 博 服务 应 用 一 一 Android 版 的 Twitter， 如 图 1-3 所 示 。 

Twitter 作为 著名 的 社交 网 络 及 微 博 客服 务 网 站 ， 从 2006 年 创建 起 就 已 经 家 喻 户 晓 。 它 允许 用 户 将 
目 己 的 最 新 动态 和 想法 以 推 文 的 形式 友 送 给 手机 和 个 性 化 网 站 群 。 由 于 Twitter 最 初 计划 束 是 在 手机 上 使 


用 的 ， 并 且 与 短信 的 形式 比较 接近 ， 因 此 ， 所 有 的 Twitter 消息 都 被 限制 在 140 个 字符 之 内 ， 每 一 条 消息 
送 。 这 也 是 Twitter 的 一 个 迷人 之 处 。 


都 可 以 作为 


1-3 
Android 平台 的 Twitter 


2011 年 12 月 ，Twitter 对 页 面 进行 重新 设计 ， 目 的 是 让 用 尸 能 够 更 加 轻松 地 查找 Twitter 信息 
行 话题 。 用 户 使 用 新 版 Twitter 提供 的 新 型 工具 ， 可 以 更 轻松 地 浏 哎 视 
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以 及 其 他 内 容 。 用 户 还 可 以 查看 自己 关注 的 人 和 被 关注 粉丝 的 数量 ， 以 及 自己 所 发 布 的 Twitter 信息 被 转 
发 的 情况 ， 并 查看 根据 自己 兴趣 或 所 在 地 理 位 置 的 Twitter 信息 排列 结果 等 。 此 外 ， 新 版 Twitter 还 允许 
所 有 用 户 查看 Twitter 品牌 页 面 。 

在 图 1-3 里 ， 我 们 分 别 可 以 看 到 Twitter 在 Android 平台 上 的 手机 和 平板 电脑 的 用 户 界面 设计 ， 其 
布局 合理 、 色 彩 大 气 、 字 体 清晰 、 操 作 流畅 ， 是 一 款 非常 优秀 的 用 户 体验 设计 案例 。 

最 后 为 大 家 介绍 的 是 著名 的 美国 彩色 对 开 日 报 《今日 美国 在 Windows Phone 平台 上 的 移动 用 户 端 ， 
如 图 1-4 所 示 。 


1—4 
Windows Phone 平台 上 的 
《今日 美国 》 


第 1 章 做 好 准备 了 吗 一 一 了 解 移动 平台 和 移动 应 用 


《今日 美国 》 于 1982 年 9 月 创刊 ,至今 为 止 一 直 保持 着 彩色 版 面 消息 集中 .多 用 图 表 、 重 视 体 育 报 道 、 
便于 读者 迅速 获得 所 需 信息 等 特点 而 吸引 着 读者 。 进 入 移动 互联 网 时 代 的 今天 ,《 今 日 美国 》 仍 然 保 持 着 
各 方面 的 领先 优势 。 归 纳 起 来 ， 作 为 全 新 的 移动 数码 报纸 ,《 今 日 美国 》 主 要 有 4 大 特点 。 
。 涵盖 面 广 。 专 门 开 辟 了 “美国 各 地 ”和 “世界 新 闻 摘 要 ”专栏 ， 便 于 读者 从 这 一 份 报纸 上 了 解 美 国 
各 地 及 世界 上 的 重大 新 闻 。 

。 动态 天 气 。 仿 效 电 视 气 象 预报 形式 ， 首 创 了 用 彩色 气象 图 表 报 道 美 国 50 个 州 、100 多 个 主要 城市 
3 天 天 和 气 的 趋势 。 

。 界面 美观 。 独 创 了 使 用 生动 的 图 片 和 图 表 为 主 的 新 闻 报 道 ， 图 文 并 成， 形式 美观 ， 提 高 了 读者 的 
读 报 欲望 和 兴趣 。 

。 文字 精炼 。 它 注重 使 用 简洁 明快 的 报道 文体 ， 偏 爱 使 用 短 句 、 短 字 来 浓缩 文章 ， 有 了 时， 一 两 句 话 
就 构成 了 一 条 新 闻 ， 这 样 束 充 分 节省 了 篇 幅 ， 便 于 登载 尽 可 能 多 的 信息 ， 以 突出 其 综合 性 大 报 的 
寺 点 。 

在 图 1-4 中 ， 我 们 可 以 分 别 欣 赏 到 《今日 美国 》 在 Windows Phone 平台 上 的 手机 和 平板 电脑 移动 
用 户 端 上 的 界面 设计 。 它 把 Windows Phone 平台 和 矩 形 磁 贴 的 界面 元 素 ， 以 及 水 平移 动 的 布局 观念 和 扁 
平 化 设计 风格 运用 得 出 神 入 化 。 这 是 一 款 精 彩 的 、 市 有 浓郁 的 Windows Phone 平台 味 遵 的 用 尸体 验 设计 。 

上 面 我 们 向 大 家 分 别 介绍 了 三 大 移动 平台 上 风格 各 异 的 三 款 经 典 的 应 用 设计 ， 目 的 是 让 大 家 对 移动 应 
用 、 用 户 界 面 以 及 用 户 体验 设计 有 一 个 比较 直观 的 认 知 和 了 解 ， 那 么 作为 本 书 的 主线 ， 移 动 应 用 的 三 大 平 
台 到 底 是 怎样 被 创建 形成 的 ， 它 们 的 特点 和 区 别 又 是 什么 呢 ? 


1.2 移动 设备 的 三 大 主流 平台 


所 谓 移 动 平台 ， 就 是 移动 设备 上 的 操作 系统 ， 它 是 安装 各 个 应 用 程序 的 载体 。 由 于 最 初 主要 是 建立 在 
移动 通信 功能 的 基础 上 ， 因 此 又 称 为 移动 通信 平台 ， 它 一 般 由 移动 终端 、 移 动 通 信和 网 络 和 数据 中 心 组 成 。 
移动 终端 主要 指 智能 手机 、 平 板 电 脑 、 便 携 式 计算 机 等 ， 移 动 通信 和 网络 包 括 电 信和 通信 和 网络 和 移动 互联 网 ， 
数据 中 心 一 般 由 信息 平台 、 用 户 管理 平台 和 中 心 数据 库 组 成 。 

目前 ， 市 场 上 的 移动 平台 种 类 很 多 ， 但 最 主流 的 主要 有 3 个 ， 也 就 是 苹果 公司 的 iOS 平台 、Google 
公司 的 Android 平台 和 微软 公司 的 Windows Phone 平台 ， 我 们 将 其 统称 为 三 大 平台 。 


1.2.1 iOS 平 台 


iOS 平台 是 由 美国 的 苹果 公司 开 友 的 移动 设备 操作 系统 。 苹 果 公 司 最 早 在 2007 年 1 月 9 日 的 
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Macworld 大 会 上 公布 了 这 个 系统 。 它 最 初 是 设计 给 iPhone 手机 使 用 的 ， 因 此 当时 命名 为 iPhone OS， 
后 来 陆续 套用 到 iPod touch、iPad 以 及 iPad mini 等 苹果 移动 产品 上 , 在 2010 年 6 月 7 日 的 WWDC 
大 会 上 宣布 将 其 改名 为 iDOS 。 

IOS 平台 的 发 展 是 三 大 平台 中 最 成 功 、 也 是 最 稳健 的 。2011 年 10 月 4 日， 苹果 公司 宣布 iOS 平台 
的 应 用 程序 已 经 突破 50 万 个 。2012 年 2 月 ， 应 用 总 量 达 到 552 247 个 ， 其 中 游戏 应 用 最 多 ， 达 到 95 
324 个 ， 约 占 17.26%; 图 书 应 用 排 在 第 二 ， 忆 量 为 60 604 个 ， 约 占 10.97%; 娱乐 应 用 排 在 第 三 ， 忆 
量 为 56 998 个 ， 约 占 10.32%。2012 年 6 月 , 苹果 公司 在 WWDC 2012 上 宣布 了 iOS 6 (其 标志 如 图 
1-5 所 示 )， 提 供 了 超过 200 项 新 功能 。 

IOS 6 拥有 许多 非常 优秀 的 应 用 和 功能 ， 比 如 说 以 全 新 角度 呈 
现 的 地 图 应 用 ， 可 以 通过 语音 来 上 友 送 信息 的 Siri 功能 ， 带 有 iCloud py 
超 强 分 享 功能 的 照片 浏览 应 用 ， 高 效 管理 和 使 用 各 种 票据 、 卡 片 的 IO3 6 
Passbook，FaceTime 视频 电话 ， 全 新 的 邮件 功能 和 Safari 网 络 浏 
览 器 等 。 更 多 的 应 用 程序 、 影 音 文 件 及 书刊 报纸 可 以 通过 iOS 官方 的 国人 .5 joe 6 的 标志 
应 用 商店 iTunes Store、App Store 和 iBookstore 购买 和 下 载 安装 。 
通过 iCloud ， 你 的 预览 历史 记录 会 在 你 所 有 的 设备 上 保持 更 新 。 因 此 ， 你 可 以 在 iPhone 上 开始 购物 ， 然 
后 在 iPad 上 继续 而 不 必 退 出 使 用 中 的 应 用 。 

iOS 的 用 户 界面 非常 严谨 ， 同 时 带 有 创新 精神 ， 如 图 1-6 所 示 。 在 界面 上 ， 我 们 可 以 使 用 多 点 触 控 
直接 操作 。 控 制 方法 包括 滑动 、 轻 触 开 关 及 按键 。 与 系统 的 交互 包括 各 种 手势 ， 如 滑动 、 轻 按 、 挤 压 及 旋 
转 。 此 外 ， 通 过 其 内 置 的 加 速 器 ， 可 以 在 坚 屏 和 横 屏 之 间 切 换 ， 这 样 的 设计 使 IOS 平台 的 移动 设备 更 便于 
使 用 。 在 屏幕 下 方 ,有 一 个 主屏 幕 ( Home ) 按键 ,屏幕 底部 则 是 苹果 操作 系统 特有 的 Dock 应 用 启动 平台 ， 
用 户 可 以 将 经 常 使 用 的 程序 的 图 标 在 Dock 上 固定 4 个 (iPad 上 可 增 至 6 个 )。 屏幕 上 方 是 状态 栏 ， 能 显 
示 时 间 、 电 池 电 量 和 信号 强度 等 相关 数据 。 其 余 的 屏幕 面积 用 于 显示 当前 的 应 用 程序 。 启 动 iPhone 应 用 
程序 的 唯一 方法 就 是 在 屏幕 桌面 上 点 击 该 程序 的 图 标 , 退出 程序 则 是 按 屏幕 下 方 的 Home 键 (在 iPad 上 ， 
可 使 用 五 指 捏合 手势 回 到 主屏 幕 )。 当 第 三 方 软件 收 到 了 新 的 信息 时 ， 苹 果 的 服务 器 将 把 这 些 通知 推送 至 
iPhone 、iPad 或 iPod Touch 上 ,不管 它 是 否 在 运行 中 。 在 iPhone 上 ， 许 多 应 用 程序 之 间 无 法 直接 调 
用 对 方 的 资源 。 然 而 ， 不 同 的 应 用 程序 仍 能 通过 特定 方式 分 享 同 一 个 信息 。 

IOS 是 三 大 平台 中 拥有 应 用 程序 最 丰富 的 移动 平台 ， 几 平 每 个 分 类 中 的 应 用 都 有 数 干 款 ， 而 且 每 款 应 
用 都 很 精美 。 这 是 因为 苹果 公司 为 第 三 方 开发 者 提供 了 丰富 的 工具 和 APIl， 从 而 让 他 们 设计 的 应 用 能 充分 
利用 每 部 iOS 设备 缠 含 的 先进 技术 。 所 有 App 都 集中 在 一 处 ， 只 要 使 用 你 的 Apple ID， 即 可 轻松 访问 、 
搜索 和 购买 这 些 应 用 , 如 图 1-7 所 示 。iCloud 可 以 存放 照片 、 应 用 、 电 子 邮 件 、 通 讯 录 、 日 历 和 文档 等 内 容 ， 
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并 以 无 线 万 式 将 它们 推送 到 你 所 有 的 设备 上 。 如 果 你 用 iPad 担 摄 照片 或 编辑 日 历 事件 ，iCloud 能 确保 这 


些 内 容 也 会 出 现在 你 的 Mac、iPhone 和 iPod touch 上 而 无 须 你 进行 任何 操作 。 


状态 栏 


图 1-6 

iOS 平台 的 用 户 界 面 特 点 ， 左 图 
为 iPhone 5， 中 图 为 iPad 4， 右 
图 为 iPad mini 


Dock 
主屏 幕 ( Home ) 


: 面 


me | Ta Search A 有 


LIBRARY Cenres 


a Musie 
国 [ 习 


和 


TONRE 
加 Tunas Store 
二 ng 


GENIUS 
总 Garnius 


PLAYLISTS 
十 Tune 加 
种 和 Musit 
入 Classlcal Music 
器 Music Widens 
器 My Tap faneg 
如 Ieeenaly aadea Beats 
吕 Reenaly Flayed 
时 Tap 25 Most Mayed 


回 Mevies 
TV Shows 

-DRAW 4FAEE 
Pr ii FF Biminar LAIR 


Lehn Igniti.., Mobllebls Gal,., 


VLE Medin FI... : 
Enremamnmant Encty Norwriinag | 全 
iPhone and iPod touch Appe 0 Apps 


cheek fer Updams Cor More 点 Ps 全 


图 1-7 在 iTunes Store 上 购买 并 安装 应 用 


9 


10 


品味 移动 设计 一 一 |OS、Android、Windows Phone 用 户 体 验 设 计 最 佳 实 践 


1.2.2 Android 平台 


Android 操作 系统 最 初 由 Andy Rubin 开发 ， 当 时 只 是 针对 手机 而 开发 的 ，2005 年 8 月 被 Google 
收购 并 注资 。2007 年 11 月 ，Google 与 84 家 硬件 制造 两 、 软 件 开 友 商 及 电信 营运 两 组 建 开 友 手 机 联盟 ， 
并 共同 研 友 改 民 的 Android 系统 。 随 后 ，Google 以 Apache 开源 许可 证 的 授权 方式 ， 发 布 了 Android 
的 源 代码 。2008 年 10 月 ， 第 一 部 Android 智能 手机 发 布 。 如 今 ，Android 已 经 逐渐 扩展 到 平板 电脑 及 
其 他 领域 上 ， 如 电视 、 数 码 相机 和 游戏 机 等 。 

Android 一 词 的 本 义 指 “ 机 器 人 ”， 因 此 它 的 logo 是 一 个 全 身 绿色 的 机 器 人 。 此 外 ， 绿 色 也 是 
Android 的 标准 色 。Android 系统 的 标志 如 图 1-8 所 示 。 

在 竞争 力 上 ,Android 可 以 说 是 超 乎 想象 .2010 年 10 月 ,谷歌 宣布 Android 系统 达到 了 第 一 个 里 程 碑 ， 
即 在 电子 市 场 上 获得 官方 数字 认证 的 Android 应 用 数量 已 经 达到 了 10 万 个 。2010 年 12 月 ， 谷 歌 正 式 
发 布 了 Android 2.3 操作 系统 Gingerbread ( 姜 饼 )。2011 年 1 月， 谷歌 称 每 日 的 Android 设备 新 用 户 
数量 达到 了 30 万 部 ， 到 2011 年 7 月 ， 这 个 数字 增长 到 55 万 部 ， 而 Android 系统 设备 的 用 户 总 数 达 到 
了 1.35 亿 ， 此 时 Android 系统 已 经 成 为 智能 手机 领域 占有 量 最 高 的 系统 。2011 年 8 月 2 日 ,Android 
手机 已 占据 全 球 智 能 机 市 场 48% 的 份额 ， 并 在 亚太 地 区 市 场 占据 统治 地 位 ， 终 结 了 Symbian ( 塞 班 ) 系 
统 的 霸主 地 位 ， 跃 居 全 球 第 一 。2011 年 9 月 ，Android 系统 的 应 用 数目 已 经 达到 了 48 万 ， 而 在 智能 
手机 市 场 ，Android 系统 的 占有 率 已 经 达到 了 439% 。 继 续 排 在 移动 操作 系统 首位 。 之 后 ， 谷 歌 发 布 了 全 
新 的 Android 4.0 操作 系统 ( 如 图 1-9 所 示 )， 这 款 系统 被 谷歌 命名 为 Ice Cream Sandwich ( 冰激凌 
三 明治 )。 


AMIR201D 


1-8 Android 系统 的 标志 1-9 安装 在 Android 移动 设备 上 的 Android 4.0 操作 系统 


作为 普及 性 最 广 的 移动 平台 
e 开放 性 。Android 开发 平台 允许 任何 移动 终端 厂商 加 入 到 Android 联盟 中 来 ， 而 这 
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，Android 系统 的 优势 很 多 ， 有 具体 如 下 所 示 。 
文 个 优越 的 开放 
性 可 以 使 Android 拥有 更 多 的 开发 者 。 
不 受 束 缚 。 我 们 知道 ， 在 移动 通信 早期 很 长 的 一 段 时 间 里 ， 特 别 是 在 欧美 地 区 ， 手 机 应 用 往往 受 
到 运营 商 制约 ， 使 用 什么 功能 接 入 什么 网 络 ， 几 乎 都 受到 运营 商 的 控制 。 自 从 2007 年 iPhone 上 
市 后 ， 用 户 可 以 更 加 方便 地 连接 网 络 ， 运 营 商 的 制约 减少 。 随 着 2G 至 3G 移动 网 络 的 逐步 过 渡 
和 提升 ， 手 机 已 经 完全 可 以 随意 接 入 网 络 而 不 受 运 莒 商 的 约束 。 

富 的 硬件 设备 。Android 平台 拥有 丰富 的 移动 设备 硬件 产品 ， 这 一 点 还 是 与 Android 平台 的 开 
放 性 相关 。 由 于 Android 的 开放 性 ， 众 多 厂商 会 推出 造型 规格 丰富 、 功 能 特色 各 
功能 上 的 差异 和 特色 ， 却 不 会 影响 到 数据 同步 、 软 件 兼容 以 及 资料 的 转移 。 
方便 开发 。Android 平台 提供 给 第 三 方 开 友 丙 一 个 十 分 宽 演 、 自 由 的 环境 ， 不 会 受到 各 种 条 条 


框框 的 阻 扰 。 可 想 而 知 ， 在 这 样 范 松 的 环境 下 ， 将 会 诞生 多 少 新 闫 别人 怪 的 移动 应 用 软件 。 当 然 ， 


异 的 移动 产品 。 


Android 也 有 自己 的 官方 应 用 发 布 平 台 “Google Play”( 如 图 1-10 所 示 )。 
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1.2.3 Windows Phone 平 台 


Windows Phone 是 微软 公司 2010 年 友 布 的 一 款 移 动 设备 操作 系统 ， 它 将 微软 旗下 的 Xbox Live 
游戏 、Xbox Music 音乐 与 独特 的 视频 体验 整合 至 其 中 。2010 年 10 月 11 日 ,微软 公司 正式 友 布 了 智 
能 手机 操作 系统 Windows Phone， 同 时 将 谷歌 的 Android 和 苹果 的 iOS 列 为 主要 竞争 对 手 。2011 年 
6 月 21 日 ， 微 软 正式 发 布 最 新 的 手机 操作 系统 Windqows Phone 8， 它 采用 和 Windows 8 相同 的 内 核 。 
Windows Phone 8 平台 的 logo 如 图 1-11 所 示 。 


1—11 
Windows Phone 8 
平台 的 logo 


轩 Vindows Phone 8+ 


相 比 iOS 和 Android 两 大 平台 ，Windows Phone 的 个 性 更 加 明显 且 独 树 一 帜 ， 出 现 了 桌面 定制 、 
图 标 拖 遇 滑动 控制 等 一 系列 前 卫 的 操作 体验 。 它 的 主屏 幕 通过 可 以 反 转 的 磁 贴 来 显示 新 的 电子 邮件 短信、 
未 接 来 电 、 日 历 约 会 等 ， 让 人 们 对 重要 信息 保持 时 刻 更 新 。 此 外 ， 它 还 包括 一 个 增强 的 触摸 屏 界 面 ， 更 方 
便 手 指 操 作 ; 以 及 一 个 最 新 版 本 的 IE Mobile 浏 砚 器， 凸显 出 微软 在 用 户 操作 体验 上 所 做 出 的 努力 。 微 软 
公司 首席 执行 官 史 蒂 夫 … 鲍 尔 默 也 表示 :“ 全 新 的 Windows 手机 把 网 络 、 个 人 电脑 和 手机 的 优势 集 于 一 身 ， 
让 人 们 可 以 随时 随地 享受 到 想 要 的 体验 。 

Windows Phone 操作 系统 在 2010 年 2 月 首次 亮相 ， 并 正式 加 外 界 展 示 。2010 年 10 月 ， 微 软 正 
陈皮 布 Windows Phone 智能 手机 操作 系统 的 第 一 个 版 本 Windows Phone 7， 简 称 WP7， 并 于 2010 
年 年 底 发 布 了 基于 此 平台 的 硬件 设备 。2011 年 9 月 27 日， 微软 发 布 了 Windows Phone 系统 的 重大 更 
新 版 本 Windows Phone 7.5， 首 度 支 持 中 文 。2012 年 6 月 21 日， 微软 在 美国 旧金山 召开 发 布 会 ， 正 
式 发 布 全 新 的 操作 系统 Windows Phone 8 (简称 WP8 )。Windows Phone 8 放弃 WinCE 内 核 ， 改 用 
与 Windows 8 相同 的 NT 内 核 。 此 外 ，Windows Phone 8 系统 也 是 第 一 个 支持 双核 CPU 的 WP 版 本 ， 
这 宣布 Windows Phone 进入 双核 时 代 ， 同 时 宣告 着 Windows Phone 7 退出 历史 舞台 。 
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动态 磁 贴 ( 如 图 1-12 所 示 ) 是 出 现在 Windows Phone 系统 的 一 个 新 概念 ， 也 就 是 界面 上 可 以 动 
态 反 转 的 矩形 图 块 ， 你 可 能 会 想起 家 里 冰箱 门 上 的 那个 磁性 贴 牌 。 在 Windows Phone 系统 里 面 ， 你 会 
发 现 它 们 无 处 不 在 ， 而 且 在 操作 中 也 离 不 开 这 东西 。Metro UI 是 一 种 界面 展示 技术 ， 和 苹果 的 iOS、 谷 
歌 的 Android 界面 最 大 的 区 别 在 于 : 后 两 种 都 是 以 应 用 为 主要 呈现 对 象 , 而 Metro 界面 强调 的 是 信息 本 身 ， 
而 不 是 见 余 的 界面 元 素 。 它 的 一 大 腕 点 是 在 每 一 个 页 面 上 会 显示 下 一 个 界面 鸭 部 分 元 率 ， 这 个 功能 巧妙 地 
提示 有 用户“ 这 儿 有 更 多 信息 ， 同 时 在 视觉 效果 方面 ， 这 样 的 设计 也 有 助 于 形成 一 种 身 临 其 境 的 感 竞 。 该 
界面 概念 甫 先 被 运用 到 Windows Phone 系统 中 ， 如 今 同样 被 引入 到 Windows 8 操作 系统 中 。 


1-—12 

Windows Phone 平台 界 
面 上 的 动态 磁 贴 和 Metro 
界面 


当然 ， 移 动 设备 的 系统 操作 平台 绝 不 仅仅 这 3 和 种， 我们 熟知 的 还 包括 “ 黑 签 、 Palm 、 塞 班 和 
“Windows Mobile 等 。 但 是 在 上 述 的 三 大 平台 面前 ， 它 们 的 市 场 占有 率 和 设备 的 保有 量 相对 较 低 ， 甚 至 
已 经 被 淘汰 出 局 ， 因 此 本 书 中 我 们 束 不 再 另行 介绍 。 本 书 之 后 的 内 容 ， 都 是 基于 这 三 大 平台 的 移动 应 用 进 
行 分 析 的 ， 这 是 本 书 的 主线 之 一 。 

接 下 来 ， 我 们 殊 要 进入 正题 了 。 我 们 的 目标 ， 束 是 要 针对 这 三 大 平台 的 应 用 进行 用 尸体 验 设 计 。 第 一 
步 ， 我 们 必须 清楚 这 项 工作 的 基本 流程 和 各 个 环 书 的 目标 及 关系 。 


1.3 用 尸体 验 设计 的 基本 流程 


对 于 传统 的 设计 师 ( 包括 用 户 界 面 设计 师 和 交互 设计 师 ) 来 说 ， 移 动 应 用 的 用 户 体验 设计 是 一 个 全 新 
的 设计 领域 ， 你 在 其 他 形式 的 图 形 设计 中 积累 的 经 验 很 难 应 用 到 移动 设备 界面 上 。 也 丈 是 绞 ， 即 使 你 在 网 
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页 设计 上 拥有 丰富 的 经 验 ， 对 于 移动 应 用 的 界面 设计 来 说 也 只 能 算 处 于 入 门 阶段 。 

现在 ， 我 们 残 通 过 移动 应 用 用 尸体 验 设 计 的 工作 流程 ， 了 解 一 下 这 门 学 科 所 涉及 的 知识 领域 和 经 验 要 
求 。 这 对 移动 应 用 设计 的 初学 者 也 极 有 帮助 ， 可 以 更 加 明确 、 系 统 地 规划 目 己 的 知识 体系 ， 积 一 定 的 经 
验 和 素材 。 


1.3.1 创意 和 原型 草图 阶段 


这 部 分 工作 主要 是 对 设计 进行 前 期 铺垫 ， 以 及 对 应 用 的 概念 和 功能 进行 规划 和 设想 。 

1. 市 场 调查 

在 开始 设计 之 前 ， 我 们 必须 了 解 很 多 事情 。 首 先 要 确定 你 的 创意 还 没有 人 做 过 ， 如 果 你 发 现 已 经 有 类 
似 的 应 用 ( 这 当然 很 难免 )， 那 你 需要 比 它 做 得 更 好 ， 而 且 具 有 更 多 独特 的 优化 设计 。 最 好 的 调查 方式 是 
到 各 大 平台 的 移动 商店 上 搜索 已 有 的 应 用 程序 。iOS 应 用 一 律 在 iTunes Store 上 搜索 ( 如 图 1-7 所 示 ); 
Android 平台 由 于 其 开放 性 ， 造 成 了 网 络 上 出 现 各 种 五 花 八 门 的 应 用 商店 ， 我 推荐 大 家 还 是 在 官方 的 
Google Play(〈 如 图 1-10 所 示 ) 里 搜索 ， 因 为 它 的 内 容 比较 全 面 ， 分 类 也 比较 系统 ; Windows Phone 
的 应 用 可 以 在 Windows Phone 官网 的 Apps+Games 里 搜索 ( 如 图 1-13 所 示 )。 
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图 1-13 Windows Phone 官网 的 Apps+Games 
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2. 应 用 的 定位 

我 们 还 需要 对 自己 的 想法 有 个 明确 的 定位 ， 这 对 后 续 的 设计 工作 很 重要 ， 它 决定 了 整个 应 用 的 设计 要 
点 。 图 1-14 是 iOS 平台 的 《人 机 界面 指南 》 中 归纳 的 应 用 设计 的 定位 方法 ， 它 把 应 用 归结 为 5 个 设计 
万 同 ， 距 离 图 中 坐标 原点 越 远 的 应 用 ， 特 点 越 明 显 ， 越 能 够 与 其 他 葛 争 者 明显 区 分 开 来 ， 而 距离 原点 越 近 
的 应 用 越 兼 顾 其 他 性 质 和 功能 ， 比 较 实用 和 全 面 。 


重要 


( serious ) 


工具 


和 (tool ) 
iOS 平台 的 《人 机 界面 指南 》 中 归 —— 
纳 的 应 用 设计 的 定位 方法 娱乐 b 


( entertainment ) 


我 们 通常 推荐 大 家 在 定位 时 尽量 有 所 偏重 ， 也 残 是 距离 中 心 华 标 较 远 ， 这 样 的 应 用 比较 容易 做 出 目 己 
的 个 性 而 吸引 用 户 ， 有 具体 的 摘 述 可 以 参看 第 2 章 的 内 容 。 

3. 用 户 分 析 

这 里 主要 通过 对 应 用 的 用 户 及 用 户 群 体 的 分 析 和 了 解 来 确定 应 用 的 核心 功能 。 这 一 步 对 于 整个 应 用 的 
用 尸体 验 设 计 来 说 是 极 新 重要 的 。 在 应 用 设计 的 前 期 阶段 ， 最 容易 出 现 的 束 是 对 功能 取舍 的 争论 ， 团 队 里 
的 每 一 个 成 员 都 会 提出 各 种 功能 需求 设想 ， 也 很 容易 陷入 到 菏 一 个 有 具体 功能 中 去 。 我 们 通常 推荐 大 家 借助 
头脑 风暴 ”的 方式 来 解决 ， 具 体 可 人 参看 第 2 章 和 第 3 章 的 内 容 。 

4. 绘制 原型 草图 

并 不 是 所 有 的 问题 考虑 清楚 后 ， 我 们 丈 可 以 打开 电脑 进行 图 形 界面 设计 甚至 编码 了 。 在 进入 具体 设计 
之 前 ， 需 要 先 在 统 上 勾 划 出 应 用 的 原型 草图 ， 示 例 图 如 图 1-15 所 示 。 目 的 是 通过 铅笔 在 统 上 把 应 用 的 功 
能 点 、 操 作 济 程 、 界 面 布局 以 及 人 交互 元 素 进 行 一 次 实际 的 演习 。 去 除 多 余 或 不 合理 的 因素 ， 加 强 应 用 的 核 


心 功 能 。 
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图 1-15 手绘 原型 草图 


1.3.2 原型 的 中 保 丰 阶段 


中 保 真 原型 束 是 在 电脑 上 进行 应 用 的 图 形 界 面 设计 ， 而 不 需要 过 多 的 细节 
图 数字 化 ， 以 便于 在 电脑 上 不 断 改 进 和 补充 。 

1. 选择 布局 和 导航 方式 

在 把 应 用 设计 从 纸 面 上 移动 到 电脑 软件 的 过 程 中 ， 我 们 需要 对 几 个 重要 的 环节 进行 细 化 ， 第 一 个 束 是 
选择 好 界面 的 布局 以 及 合理 的 导航 万 式 ， 这 直接 影响 到 应 用 在 使 用 和 操作 过 程 中 页 面 跳 转 的 清晰 、 沪 畅 和 
调理 性 。 我 们 将 在 第 5 章 里 详细 介绍 三 大 平台 处 理 相关 问题 的 思路 和 规范 。 

2. 设置 控件 和 界面 元 率 

界面 的 布局 得 当 后 ， 融 要 对 界面 上 的 细节 元 素 进 行 细致 的 设计 、 排 版 和 调整 了 ， 这 个 过 程 对 设计 师 的 
图 形 把 握 能 力 和 构图 能 力 要 求 比较 高 ， 它 可 不 是 简单 地 把 这 些 元 素 拼 凑 在 界面 上 就 完成 了 ， 而 是 要 考虑 很 
多 的 相关 问题 。 包 括 上 一 步 的 导航 和 布局 在 内 ， 我 们 都 要 对 应 用 的 交互 万 式 、 人 体 工程 学 以 及 视 完 的 整体 
协调 感 进行 反复 的 调整 。 

3. 可 用 性 测试 

这 是 移动 应 用 的 用 尸体 验 设 计 中 非常 重要 的 步骤 。 将 设计 好 的 应 用 原型 输入 移动 设备 的 相册 里 ， 或 者 
使 用 软件 制作 成 可 进行 简单 页 面 间 跳 转 的 动画 。 寻 找 一 些 团 队 以 外 的 人 员 和 试看 使 用 一 下 ， 观 察 他 们 的 
使 用 情况 并 进行 记录 和 和 分析。 以 此 来 测试 应 用 布局 、 导 航 和 控件 位 置 的 合理 性 和 操作 的 体验 感 。 示 例 图 如 
106Wms 


多 饰 ， 只 是 把 你 纸 面 上 的 章 
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图 1-16 应用 的 可 用 性 测试 


1.3.3 高保 真 原型 及 设计 的 完成 阶段 


虽然 我 们 得 到 了 一 个 比较 完善 的 设计 结果 ， 但 是 中 保 真 原型 依然 是 一 个 中 间 状 态 ， 它 不 美观 、 没 个 性 ， 
无 法 吸引 用 户 来 志 试 和 使 用 ， 因 此 我 们 需要 进一步 的 创 晶 和 修饰 

1. 个 性 化 设计 

我 相信 这 是 大 部 分 设计 师 最 喜欢 的 步 又， 我 们 人 在 中 保 真 原型 的 基础 上 对 应 用 的 界面 进行 色彩 、 图 形 细 
五 字体 和 特效 上 的 修饰 和 创 晶 。 友 挥 你 天 才 般 的 想象 力 , 充分 展现 应 用 的 个 性 和 魅力 ,使 用 尸 一 打开 应 用 ， 
束 会 爱不释手 。 在 第 7 划 里 ， 我 们 会 由 浅 入 深 地 和 大 家 一 起 探索 应 用 界面 个 性 化 设计 的 思路 和 万 法 。 

2. 图 标 设 计 

这 是 最 后 也 是 画龙点睛 的 环节 ， 友 挥 你 超 长 的 造型 能 力 和 软件 技巧 ， 为 你 的 应 用 设计 一 幅 既 迷人 、 又 
有 视 党 站 击 力 的 面孔 。 让 它 无 论 在 移动 果 面 上 还 是 在 应 用 商店 的 货架 上 ， 都 能 够 吸引 用 尸 的 眼球 。 同 时 ， 
我 们 也 不 能 忽视 应 用 界面 上 工具 栏 图 标的 设计 。 

3. 交付 开 友 人 员 

最 后 ， 我 们 把 局 保 真 的 个 性 化 设计 结果 细致 地 分 类 ， 保 仔 成 相应 的 图 形 或 动画 文件 ， 连 同 完 鳌 的 界面 
设计 效果 图 一 起 分 中 }J 包 、 保 存 好 ， 做 上 清楚 的 标注 ， 友 送 给 开 友 人 员 。 人 在 这 个 过 程 中 ， 你 可 能 还 要 与 开 
友人 员 进 行 沟通 ， 还 需要 单独 保 仔 或 分 割 肝 些 图 形 。 

以 上 就是 移动 应 用 用 尸体 验 设计 的 全 部 过 程 。 在 整个 过 程 中 ， 还 有 许多 细节 并 没有 将 述 ， 比 如 讨论 、 
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修改 和 测试 的 过 程 。 当 然 ， 在 之 后 的 章节 中 ， 我 们 将 更 加 系统 详尽 地 进行 白 述 。 同 时 ， 有 泽 步 又 并 不 是 一 
次 完成 的 ,在 设计 和 实践 的 过 程 中 ,经 常会 把 设计 推翻 或 反复 一 个 甚至 几 个 步 又 ,而 且 对 原型 的 可 用 性 测试 ， 
我 们 推荐 大 家 在 每 个 环 万 完成 后 都 应 该 简单 地 进行 一 次 ， 这 样 可 以 少 走 要 路 。 因 此 ， 以 上 这 个 流程 只 是 作 
为 大 家 在 设计 过 程 的 一 个 参考 和 依据 。 

同时 ， 我 们 推荐 大 家 在 进行 设计 之 前 ， 无 论 针 对 的 是 哪个 移动 平台 ， 都 应 该 详细 阅读 相应 平台 的 《人 
机 界面 指南 》， 干 万 不 要 认为 这 只 是 给 初学 的 菜鸟 看 的 “使 用 说 明 书 ， 它 对 你 设计 的 规范 化 和 合理 性 都 会 
有 极 大 的 帮助 。 关 于 三 大 平台 的 《人 机 界面 指责》 可 以 在 它们 的 官网 上 找到 中 文 版 。 


任 之 后 的 草 惩 里， 我们 会 近 照 上 述 流程 的 顺 户 ， 近 部 天 班 地 对 每 一 个 步骤 、 每 一 个 细 三 逐一 讲解 
和 论述 。 己 此 同时 , 我 鸭 朋 到 杨洋 老师 , 一 位 了 不 起 的 力 家 , 委托 我 设计 一 个 “也 术 品 收藏 ”应 用 平 合 ， 
希望 通过 这 个 平台 在 全 球 汽 围 内 推广 包括 她 在 内 的 一 些 当代 天 名 田家 的 作品 ， 并 能 买 时 友 布 新 作品 。 
我 授 受 了 这 个 疹 巨 的 任务 ， 并 且 很 高 兴 可 以 以 这 个 项 目 为 线 系 ， 习 大 家 共同 分 娃 整 个 设计 过 程 。 我 们 
以 买 例 的 万 式 买 时 呈现 每 一 个 步 坚 ， 让 大 家 能 够 更 朋 观 地 了 解 、 体 会 用 户 体 验 设 计 的 真 买 过 程 和 仿 体 
WN 


到 这 里 ， 我 们 把 移动 应 用 用 尸体 验 设计 的 概念 、 移 动 应 用 的 特点 、 三 大 移动 平台 以 及 相关 的 设计 流程 
向 大 家 进行 了 比较 详细 的 描述 。 现 在 可 以 开始 我 们 的 设计 了 ， 你 做 好 准备 了 吗 ? 


一 切 从 服务 用 尸 开 始 一 一 市 场 定位 和 产品 目标 


他 们 朝 三 要 四 ， 而 且 非 党 喜新厌旧 ; 他 们 缺乏 耐心 ， 而 且 忌 是 得 不 到 满足 。 他 们 漫不经心 地 盯 一 眼 屏 
禹 ， 扫 过 大 量 的 图 标 ， 竺 着 目 己 的 直 党 或 者 听 了 别人 的 介绍 下 载 了 一 个 应 用 ， 但 是 大 部 分 情况 下 ， 他 们 摊 
弄 了 一 小 会 儿 就 无 情 地 把 它 搜 进 了 垃圾 桶 。 

这 融 是 我 们 面 对 的 用 户 群 。 

有 些 设计 师 ( 包括 曾经 的 我 ) 总 是 天 和 真 地 认为 只 要 把 应 用 界面 设计 得 好 看 、 华 丽 、 可 爱 ， 用 户 束 一 定 
会 买账 。 从 项 目 构 思 的 第 一 时 间 开 始 ， 满 脑子 想 的 都 是 怎么 能 把 它 弄 得 有 视 宫 感 ， 能 够 吸引 眼球。 可 现实 
忌 是 残酷 的 ， 我 们 精心 设计 出 来 的 图 标 只 被 他 们 飞快 地 盯 了 一 眼 ， 精 美的 界面 根本 没有 被 打开 。 

怎样 才能 设计 出 受用 尸 青 睐 的 移动 应 用 ? 这 需要 我 们 在 确立 项 目的 同时 , 能 够 冷静 地 分 析 目 己 的 设想 ， 
理性 地 定位 目 己 的 市 场 目标 及 产品 用 户 ， 深 入 地 了 解 你 所 面 对 的 这 个 庞大 的 用 户 群 体 ， 针 对 他 们 的 需求 、 
习惯 和 欲望 ， 做 有 价值 的 、 能 触动 人 心 的 应 用 。 


2.1 是 移动 产品 ， 不 是 电脑 软件 


我 们 从 分 析 整 个 移动 用 己 群 开始 我 们 的 设计 之 旅 。 在 这 一 古里 ， 我 们 讨论 的 是 如 何 让 你 的 应 用 成 为 一 
个 移动 应 用 天 品 ， 而 不 是 其 他 什么 东西 ， 比 如 电脑 上 的 软件 或 是 过 探 器 。 它 必须 建立 在 对 移动 产品 性 能 的 
了 解 以 及 用 尸 使 用 习惯 的 基础 之 上 。 简 旱地 说 ， 有 些 事 情人 们 愿意 在 移动 产品 上 做 ， 而 有 些 事情 则 不 适合 ， 
大 家 更 愿意 在 电脑 上 或 其 他 设备 上 完成 。 

那么 ， 移 动 应 用 应 该 是 个 什么 样子 呢 ? 
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2.1.1 不 为 外 表 华 丽 


华丽 、 丰 富 的 视觉 效 果 可 以 成 为 游戏 的 界面 、 网 页 上 的 个 人 空间 、 杂 志 的 封面 或 者 是 随时 都 可 能 会 弹 
出 的 商品 广告 ， 但 是 并 不 一 定 适合 你 的 移动 应 用 ， 尤 其 是 手机 应 用 的 界面 ， 原 因 有 如 下 3 个 。 
。 本 末 倒 置 。 丰 晤 的 色彩 变化 或 者 是 过 多 的 特效 容易 弱化 应 用 的 主体 功能 ， 分 散 注 意 力 ， 让 视线 很 
难 集中 到 主体 事件 上 ， 使 用 尸 眼花 绎 配 、 无 所 适 从 。 
。 浪费 空间 。 过 多 的 涂饰 和 特效 会 使 本 束 不 大 的 屏 芝 变 得 拥挤 ， 增 加 了 用 户 使 用 的 难度 。 当 然 ， 过 
多 的 濠 饰 也 会 加 大 应 用 的 体积 ， 减 组 下 载 和 打开 的 速度 ， 得 不 偿 失 。 
。 成 本 上 升 。 华 琢 的 效果 会 给 程序 员 增 加 很 大 的 工作 量 ， 不 但 延长 了 开 友 时 | 介 ， 而 且 收 效 甚 微 。 
收音 机 病 钟 ( 如 图 2-1 左 图 所 示 ) 是 iOS 平台 上 一 款 很 有 风格 的 应 用 ， 我 第 一 次 打开 这 款 应 用 的 
时 候 厦 实 对 它 的 界面 设计 折服 了 一 番 ， 厚 重 的 复古 设计 、 精 致 的 仿真 细节 ， 我 甚至 都 能 邮 到 证 旧 的 家 具 上 
散 皮 出 来 的 沉香 味 ， 这 绝对 是 设计 局 手 的 杰作 。 可 吏 在 我 晚上 睡 咒 表 打 算 用 它 设置 南 钟 的 时 候 ， 却 在 这 个 
华丽 的 界面 上 困惑 了 半天 ， 因 为 这 些 精致 的 按钮 总 让 我 感 沉 必须 认真 精密 地 操作 才能 成 功 。 最 终 ， 我 放弃 
了 这 个 “精美 的 艺术 品 ， 富 不 犹豫 地 打开 了 iPhone 系统 自 带 的 闹钟 功能 〈 如 图 2-1 右 图 所 示 )， 原 因 是 
我 当时 已 经 很 困 了 ， 而 iPhone 的 册 钟 用 起 来 很 直接 ， 不 需要 动脑 子 。 


图 2-1 

iPhone 设备 上 的 “收音 机 六 
钟 ”( 左 图 ) 和 iOS 上 的 系统 
闹钟 〈 右 图 ) 


成 熟 的 设计 师 不 应 该 把 视觉 创意 和 视觉 效果 作为 衡量 设计 的 唯一 标准 。 尤 其 是 在 用 户 体 验 设 计 贪 域 里 ， 
你 的 界面 设计 是 杀 和 体贴 的 服务 用 户 还 是 在 用 尸 面 前 急功近利 地 烃 滩 目 己 的 特 扩 ， 这 之 间 的 牵 别 是 很 容易 
识别 出 来 的 。 

当然 ， 外 表 不 华丽 可 不 意味 着 我 们 的 应 用 不 美观 、 不 时 尚 、 没 创意 ， 我 们 要 在 设计 图 形 和 图 像 之 前 
建立 完整 的 设计 目标 ， 即 搭建 一 个 合理 的 、 人 性 化 的 框架 ， 确 定好 应 该 突出 什么 ， 弱 化 什么 ;该 先 看 到 什 
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么 ， 后 看 到 什么 。 干 万 不 要 用 浮华 的 效果 喧 宾 夺 主 ， 要 将 所 有 的 东西 融入 到 你 先前 构建 的 这 个 框架 整体 中 
去 。Tapbots 公司 的 “Convertbot 换算 机 器 人 ”( 如 图 2-2 所 示 ) 就 是 一 款 既 美观 大 方 又 简单 好 用 的 应 
用 。 可 以 感觉 到 ,平庸 无 奇 的 功能 经 过 了 人 性 化 的 设计 和 物理 真实 的 细节 处 理 ( 单位 换算 时 还 带 有 马达 声 )， 
可 以 带 来 高 享受 的 用 户 体验 。 

更 重要 的 是 ， 我 们 的 设计 要 能 够 与 移动 设备 和 使 用 环境 相 适 应 ， 同 时 ， 还 要 适应 JiOS、Android、 
Windows Phone 等 多 个 移动 应 用 平台 的 移植 ， 这 才 是 完美 而 专业 的 设计 。 在 后 面 的 内 容 里 ， 我 们 会 针对 
上 述 这 几 个 方面 分 别 和 大 家 分 享 我 们 的 经 验 和 方法 。 


CarTier 富 -了 11:08 AM 
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图 2-2 iOS 平台 的 “Convertbot 换算 机 器 人 ” 


2.1.2 不 为 功能 强大 


外 表 不 用 那么 光鲜 可 以 理解 , 尘 竞 用户 使 用 我 的 产品 是 因为 它 的 功能 ,所 以 ,我 要 用 强大 的 功能 来 弥补 ， 
使 我 的 应 用 能 够 处 理 更 高 难度 的 事情 和 拥有 更 加 全 面 的 功能 。 这 样 的 想法 在 项 目 初 期 是 非常 合理 而 且 也 是 
值得 提倡 的 ,因为 这 样 才能 更 好 地 激 友 我 们 的 想象 力 和 创造 力 。 放 开刀 路 ,用 头脑 风暴 在 日 板 上 画 得 满 满 的 。 
当然 ， 风 暴 过 后 我 们 终究 要 面 对 现 实 : 你 的 应 用 好 用 吗 ? 

现在 我 们 来 看 看 用 己 是 怎样 使 用 移动 产品 的 : 他 们 通常 会 在 一 边 竹 商场 的 时 候 ， 一 边 拿 出 手机 迅速 地 
在 网 页 上 查看 网 店 的 报价 ; 会 在 服务 员 端 上 一 份 菜肴 的 时 候 ， 赶 举 用 手机 担 下 来 ， 然 后 友 到 微 博 上 去 ;， 会 
在 超市 收银 从 前 排队 的 时 候 ， 趁 机 打开 新 闻 中 心 看 看 今天 的 头条 ; 会 在 银行 营业 大 厅 等 号 的 时 候 ， 拿 出 平 
板 电脑 看 看 股市 或 者 比较 一 下 汇率 …… 友 现 了 吗 ” 他 们 做 的 事情 好 像 难度 都 不 大 ， 除 非 迫 不 得 已 ， 谁 也 不 


22 


品味 移动 设计 一 一 iOS、Android、Windows Phone 用 户 体验 设计 最 佳 实践 


会 愿意 在 移动 产品 上 完成 那些 高 难度 的 工作 。 问 题 的 关键 是 ， 他 们 需要 一 边 看 着 手机 屏 需 ， 一 边 还 要 观察 
着 周围 的 环境 ( 可 别 过 号 了 ! ), 所 以 他 们 对 应 用 程序 的 直观 需求 除了 美观 之 外 , 融 是 最 好 直接 完成 或 打开 ， 
既 不 愿意 等 ， 也 不 愿意 想 ， 更 不 愿意 找 。 

我 们 都 知 追 ， 小 小 的 手机 或 平板 电脑 ， 又 轻 又 注 ， 硬 件 高 度 集成 。 虽然 各 大 生产 厂商 不 断 地 在 升级 硬 
件 配 置 ， 但 是 系统 资源 终归 是 有 限 的 ， 屏 融 大 小 更 有 限 。 每 增加 一 个 功能 点 ， 都 是 在 抢夺 这 些 有 限 的 系统 
资源 和 屏 需 位 置 。 功 能 是 强大 了 ,应 用 的 体验 却 降低 了 。 为 了 打开 应 用 ,我 们 的 用 户 们 需要 等 更 长 的 时 间 
由 于 功能 增多 ， 他 们 需要 更 加 耐心 地 去 寻找 和 选择 ; 由 于 按钮 增加 ， 他 们 需要 更 加 细心 地 去 操作 小 小 的 春 
面 …… 而 且 ， 我 们 的 用 户 通 单 不 会 按照 我 们 给 他 们 安排 好 的 路 走 ， 他 们 只 会 在 我 们 的 应 用 里 寻找 他 们 需要 
的 和 可 以 利用 的 东西 ， 一 旦 友 现 没有 想 要 的 或 者 没 能 达到 预期 的 效果 ， 他 们 会 无 视 我 们 精心 为 他 们 打造 的 
强大 功能 ， 坚 不 犹豫 地 抛弃 。 

作为 一 个 音乐 爱好 者 ,我 一 直 在 挑选 一 款 适 合 我 的 音乐 播放 器 .。 起 初 ,Android 上 原生 的 音乐 播放 器 如 
2-3 左 图 所 示 ) 让 我 很 满意 ， 清 晰 的 歌曲 进度 、 醒 目的 字体 和 按键 、 功 能 齐全 分 类 有 序 。 不 过 随 着 我 对 
功能 要 求 的 增加 ,我 选择 了 功能 更 加 强大 和 多 样 的 天 天 动听 ( 如 图 2-3 中 图 所 示 )。 它 不 但 分 类 更 加 详细 ， 
而 且 还 支持 在 线 播放 、 搜 索 和 下 载 。 和 大 部 分 音乐 迷 一 样 ， 我 企 手机 里 下 载 了 成 干 上 万 首 歌 曲 ， 时 间 长 了 
会 喜新厌旧 ， 我 束 得 不 停 地 挑选 歌曲 和 专辑 ， 下 一 曲 和 “播放 列表 ” 惑 成 了 我 点击 最 频繁 的 按钮 。 天 
天 动听 ” 那 拥挤 的 页 面 、 清 秀 的 图 标 和 纤细 的 字体 弄 得 我 咏 是 误 操作 ,有 时 候 要 离 得 很 近 才能 看 清楚 。 后 来 ， 
我 选择 了 界面 并 不 算 美观 的 “QQ 首 乐 播放 器 ( 如 图 2-3 右 图 所 示 )， 因 为 它 不 但 布局 合理 、 手 指点 击 很 
和 舒服， 而 且 选 择 歌 曲 的 时 候 很 有 效率 ， 只 需要 盯 一 有 眼 屏 适 束 不 会 点 错 。 
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2-3 Android 平台 的 “音乐 播放 器 ”( 左 图 )、“ 天 天 动听 ”( 中 图 ) 和 “QQ 音乐 播放 器 ( 右 图 ) 
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现在 我 们 理解 了 好 的 用 户 体验 应 该 是 什么 感觉 ， 就 是 要 勇 逆 地 舍弃 匈 余 的 功能 ， 突 出 主体 功能 ， 并 且 
善于 把 辅助 功能 “ 藏 起 来 。 所 以 ， 设 计 一 款 好 的 移动 应 用 ， 不 但 要 有 丰富 的 想象 力 ， 也 要 善于 克制 。 认 
真 地 分 析 、 调 研 和 测试 , 看 看 什么 样 的 功能 真正 抓 住 了 用 户 所 需 、 所 想 , 什么 样 的 功能 可 以 延长 应 用 的 寿命 ， 
什么 样 的 功能 属于 画蛇添足 ， 更 重要 的 是 要 注意 保持 应 用 的 简捷 、 高 效 。 

“The Typography Manual (字体 排版 手册 ， 如 图 2-4 所 示 ) 是 一 款 专门 针对 设计 师 的 字体 排版 速 
查 手册 ,界面 简洁 大 方 ,操作 快速 便捷 。 关 键 是 抓 住 了 设计 师 们 的 工作 习惯 ,里 面 的 “字体 大 小 计算 器 "和 字 
体 标尺 ”虽然 功能 非常 简单 ， 但 很 实用 。 无 论 是 印刷 排版 还 是 网 员 、 界 面 排 版 ， 我 都 会 随时 打开 这 款 应 用 
进行 参照 。 如 此 操作 简单 、 方 便 好 用 的 工具 ， 我 怎么 舍得 把 它 从 我 的 系统 里 移 除 呢 ? 


i107 PM 


| 


Font Size Ruler 


Type Anatomy 


EN > 

Es VD 

曙 
OnNt=SiIze — 

12 px 0.75. = 和 

Line-Height E> E 3 

16 px 1 Bm = : a 

Element Size 至 四 

9 px 0 em a F OD 

= 目 


图 2-4 iOS 平台 的 “The Typography Manual” 


2.1.3 别 让 它 “ 大 而 全 - 


你 的 应 用 为 什么 是 移动 应 用 ”作为 开 友 者 、 设 计 师 或 者 程序 员 ， 我 们 都 应 该 在 开始 工作 前 认真 地 想 
一 想 。 无 论 你 的 应 用 是 拥有 强大 的 功能 ， 还 是 出 奇 的 内 容 ， 或 者 是 高 科技 的 人 花样， 首先 ， 它 应 该 是 在 移动 
平台 中 使 用 的 。 当 我 们 到 达 办 公 宇 或 回 到 家 里 ， 我 想 不 管 是 工作 、 上 网 还 是 看 视频 、 玩 游戏 ， 都 会 有 比 移 
动产 品 更 合适 的 选择 。 我 们 没有 必要 ， 也 不 可 能 把 我 们 的 应 用 做 得 能 和 相应 的 产品 相 媚 美 。 比 如 我 们 不 可 
能 用 照片 美化 应 用 代 蔡 Photoshop ， 也 不 可 能 在 移动 产品 上 输入 文字 的 时 候 找 到 各 击 键盘 的 感 竞 和 速 厦 ， 
更 不 可 能 拿 窜 小 的 移动 屏 吉 和 液 昂 显示 器 相 比 。 
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那么 ， 移 动 设 备 的 优势 是 什么 ? 智能 、 随 机 、 不 受 环 境 和 空间 的 约束 ， 便 捷 地 处 理 简 蛙 任务 。 

在 开 友 移动 应 用 严 品 的 上 时候， 要 充分 考虑 到 它 的 优势 和 局 限 。 有 些 应 用 是 针对 移动 和 户外 活动 而 设 
计 开 发 的 ， 那 么 它们 的 优势 是 不 可 替代 的 。 比 如 ，Android 上 的 “车 载 屏幕 ”( 如 图 2-5 左 图 所 示 ) 就 是 
方便 用 户 在 驾车 时 拨打 和 接听 电话 、 播 放 音乐 及 查看 地 图 和 GPS 的 应 用 ， 功 能 很 简单 ， 就 是 把 相应 的 控 
件 或 按钮 变 得 很 大 、 很 醒目 ， 融 算是 不 仔细 看 也 不 会 误 操作 ， 使 用 户 在 驾车 时 不 会 太 分 散 注 意 力 。iBird 
Explorer Plus( 乌 探 加 强 版 ,如 图 2-5 中 图 所 示 违 为 乌 类 爱好 者 在 野外 观察 乌 类 识别 汐 毛 和 叫 声 的 指南 。 
当然 ， 这 也 是 直接 针对 特定 用 户 的 一 个 很 好 的 例子 。 想 一 想 那 些 常年 在 野外 工作 的 动物 研究 者 们 ， 这 样 的 
应 用 是 多 么 的 贴心 。Star Chart ( 星 图 ， 如 图 2-5 右 图 所 示 ) 是 目前 日 本 和 法 国 销量 最 佳 的 一 款 教育 应 用 
程序 ,只 要 将 你 的 移动 设备 指 同 天 空 , 应 用 将 准确 地 指出 你 正在 观看 的 天 体 。 它 采用 了 最 先进 的 GPS 技术 ， 
加 上 精确 的 三 维 宇宙 图 ， 让 所 有 的 天 文 爱好 者 和 喜欢 对 着 星座 许愿 的 女生 们 体验 到 了 名 副 其 实 的 高 科技 
生活 。 


国 下 年 驴 :二 5 息 i100 


县 Ti 
JJ 


[ee 


Harnpe 


mimilar 


图 2-5 Android 平台 上 的 “车 载 屏幕 ”( 左 图 )、iOS 平台 上 的 “iBird Explorer Plus” 和 Windows Phone 
平台 上 的 “Star Chart” 


上 述 这 些 应 用 只 能 在 移动 平台 中 使 用 ， 它 们 束 像 是 为 移动 平台 而 生 的 ， 重 点 在 于 想法 和 创 草 。 而 有 些 
应 用 ， 与 电脑 软件 或 其 他 产品 的 界限 束 不 是 那么 明显 ， 它 们 很 像 是 电脑 软件 的 微缩 版 或 是 简化 版 ， 比 如 微 
博 、 内 置 网 页 浏 咒 器 、 记 事 本 等 。 那 么 ， 这 一 类 应 用 如 何 能 够 体现 出 移动 应 用 的 优 努 来 呢 ? 那 瓯 要 看 看 我 
们 在 移动 设备 上 做 的 事情 与 电脑 上 有 什么 不 同 了 : 在 路 上 、 在 运动 中 、 在 超市 里 排队 的 时 候 ， 我 们 处 理 的 
不 可 能 是 复杂 或 精细 的 任务 , 只 会 处 理 一 些 简单 的 | 临时 的 或 者 襄 是 微 任 务 。 因 此 , 在 设计 移动 应 用 的 时 候 ， 
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我 们 完全 可 以 所 并 那些 不 适合 在 移动 平台 上 使 用 的 功能 ， 保 留 那 学 适合 单 手 操作 或 者 简单 的 双手 操作 的 功 
能 ， 而 没有 必要 把 电脑 软件 中 所 有 的 功能 都 做 出 来 。 通 过 前 面 的 讨论 ， 我 们 也 清 东 了， 过 多 的 功能 只 会 增 
加 使 用 的 难度 ， 降 低 使 用 效率 ， 大 而 全 的 应 用 是 非常 不 可 取 的 。 

我 们 需要 对 电脑 软件 进行 提炼 、 瘦 身 和 重新 搭建 ， 使 它 不 但 能 够 在 移动 平台 上 运行 ， 还 要 适合 在 移动 
平台 上 操作 。 当 然 ， 这 里 只 进行 简单 的 或 初步 的 操作 ， 深 入 或 局 难 硫 的 还 是 留 给 电脑 来 完成 吧 。 我 们 不 能 
在 移动 设备 上 作 图 ,但 是 可 以 对 图 片 进行 修 瘟 和 拼 贴 , 然后 友 到 互联 网 上 ; 我 们 不 能 捐 望 在 手机 上 长 篇 大 论 ， 
但 可 以 友 表 简短 的 微 博 和 评论 ; 在 小 小 的 移动 屏 坟 上 浏览 门户 网 站 很 费劲 ， 我 们 可 以 下 载 各 大 门户 网 站 的 
移动 客户 靖 …… 所 以 , 我们 要 为 移动 平台 量 身 打造 相应 的 产品 , 而 不 是 把 电脑 软件 照搬 上 去 , 变 成 无 所 不 能 、 
大 而 全 的 应 用 。 

Quickoffice ( 如 图 2-6 所 示 ) 就是 一 个 修 问 和 瘦身 做 得 很 好 的 例子 。 这 个 在 电脑 上 功能 强大 到 无 所 
不 能 的 Office， 在 这 里 被 打造 得 相当 精 悍 。 比 如 ， 由 于 你 的 手指 无 法 在 小 小 的 移动 屏 禹 上 修改 复杂 的 表格 
和 排列 图 片 , 所 以 在 Quickoffice 上 表格 和 图 片 只 能 显示 , 不 能 编辑 。 同 时 , 对 于 简单 的 文字 和 格式 的 编辑 ， 
Quickoffice 则 设计 得 非常 人 性 化 , 操作 简单 、 易 于 修改 ,比如 粗 体 、 冬 体 、 项 目 列 表 、 文 本 对 阶 等 。 然 而 ， 
比 起 一 般 的 移动 应 用 来 说， 它 的 结构 也 算 比 较 爱 肿 的 ， 但 是 作为 一 款 能 够 对 文本 进行 阅读 、 人 创建、 编辑 和 
保存 的 应 用 来 说 ， 它 已 经 非常 完美 了 。 
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2-6 iOS 平台 上 的 Quickoffice 


在 多 如 牛 毛 的 移动 应 用 之 中 ， 每 一 个 移动 用 户 都 在 挑选 目 己 需 要 的 那 一 称 ， 融 像 从 满 满 的 一 箱 工 具 里 
挑选 最 顺手 的 一 把 工具 。 所 以 ， 不 能 指望 你 的 应 用 是 全 能 的 。 其 实 我 们 都 明日 ， 越 是 全 能 的 工具 ， 往 往 用 
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起 来 越 不 顺手 。 应 用 更 是 这 样 ， 完 美的 应 用 只 专注 于 一 项 工作 或 一 种 任务 ， 没 有 必要 把 所 有 的 事情 都 做 完 。 
你 越 是 增加 应 用 的 功能 点 或 者 是 任务 的 履 善 面 ， 你 的 用 户 融 越 捅 不 清 禾 你 的 应 用 到 托 是 干什么 用 的 、 不 知 
道 什 么 时 候 访 使 用 它 。 

现在 ， 我 们 明日 了 我 们 的 方 辐 一 一 设计 一 款 移动 应 用 产品 。 那 么 作为 一 名 专业 的 用 户 体验 设计 师 ， 
我 们 应 该 怎样 使 我 们 的 移动 应 用 既 简单 、 又 好 用 、 又 好 看 呢 ? 在 后 面 的 内 容 里 ， 我 们 会 按 部 束 班 地 针对 
移动 用 户 体验 设计 中 的 每 一 个 环节 ， 依 次 分 享 我 们 的 经 验 和 方法 。 这 里 的 关键 是 分 析 用 户 和 对 移动 产品 


进行 定位 。 


2.2 ”做 有 价值 的 应 用 


富 不 奔 张 地 说 ， 我 们 每 一 个 人 都 已 经 离 不 开 移 动产 品 和 应 用 平台 了 ， 它 已 经 成 为 我 们 生活 的 一 部 分 。 
它 渐渐 取代 了 书刊 、 报 纸 ， 取 代 了 收 吝 机 、 电 视 机 ， 我 们 用 它 买 东西 、 订 和 餐馆， 用 它 聊天 交友 ， 甚 到 把 它 
当成 了 上 自己 的 事业 。 有 时 候 我 觉得， 我 的 生活 就 是 从 一 个 应 用 切换 到 另 一 个 应 用 中 去 。 而 作为 一 名 移动 应 
用 开 友 、 设 计 人 员 ， 我 们 苞 怕 更 加 关心 的 是 目 己 的 应 用 : 它 是 不 是 在 移动 商店 里 ， 是 不 是 爱人 们 关注 ， 功 
能 是 不 是 很 稳定 ， 是 不 是 比 别 的 同类 产品 好 用 ……' 药 想 着 有 一 天 ， 全 世界 的 移动 平台 只 提供 自己 应 用 的 下 
载 ， 全 世界 的 人 都 在 使 用 目 己 的 产品 。 可 惜 ， 如 果真 是 这 样 的话 ， 那 残 不 是 移动 应 用 了 ， 拓 为 移动 应 用 的 
真正 魅力 所 在 残 是 它 的 多 样 、 丰 晶 和 无 穷 无 尽 。 

因此 ,在 这 一 六 里 ， 我 们 谈 谈 如 何 面 对 和 立足 于 这 个 庞大 而 开 尊 的 市 场 ， 也 残 是 做 好 应 用 的 市 场 定位 ， 
既 要 定位 你 目 己 的 角色 ， 也 要 定位 你 的 用 户 。 


2.2.1 它 只 是 成 干 上 万 个 应 用 中 的 一 个 


如 果 移 动 应 用 平台 是 一 座 摩 天 大 楼 ， 那 么 我 们 的 作品 只 是 一 扇 小 小 的 窗户 。 只 有 使 用 了 ， 人 们 才 大 着 
你 的 产品 多 么 好 用 。 当 然 ， 我 们 可 以 用 精美 的 图 标 吸引 用 户 。 不 过 想 要 真正 地 抓 住 用 户 ， 我 们 除了 要 个 性 
鲜明 ， 也 要 使 自己 的 作品 能 够 融入 到 这 个 移动 平台 大 家 庭 里 去 ， 所 以 在 设计 应 用 之 前 ， 我 们 必须 明确 它 的 
功能 点 ， 明 确 它 所 在 的 分 类 以 及 任务 方向 。 确 切 地 说 ， 那 就 是 找到 应 用 所 扮演 的 “角色 。 

在 上 一 节 里 我 们 谈 到 了 ， 聪 明 的 设计 师 不 会 去 做 那 种 “大 而 全 ”的 应 用 ， 因 为 你 越 是 想 宪 羡 更 多 的 功 
能 ， 越 是 适得其反 ， 使 你 的 用 尸 搞 不 清楚 什么 时 候 设 用 你 的 产品 。 因 此 ， 我 们 要 精心 地 打造 一 蒜 只 针对 一 
项 工作 的 产品 ， 集 中 精力 ， 不 断 地 改进 和 人 简 化， 尽量 做 得 完美 。 只 有 这 样 才能 让 你 的 用 尸 记 得 它 ， 在 想 要 
做 同类 事情 或 者 直到 相应 任务 时 想到 它 。 

我 们 必须 面 对 事实 ， 你 的 应 用 不 是 孤立 的 ， 它 只 是 成 干 上 万 个 应 用 中 的 一 个 。 你 要 允许 你 的 应 用 和 其 
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他 应 用 共同 工作 、 和 谐 相 处 。 在 用 户 的 移动 设备 上 ， 它 与 众多 的 其 他 应 用 为 邻 ， 它 们 各 司 其 职 ， 共 享 着 移 
动 设备 的 资源 和 空间 ， 有 时 候 相 互 传递 信息 ， 有 时 还 要 相互 竞争 。 那 么 这 时 候 ， 如 果 你 的 应 用 能 够 少 一 些 
封闭 和 独断 ， 多 一 些 亲 和 力 、 融 入 大 众 ， 用 户 会 非常 欣赏 和 认可 你 ， 认 为 你 的 应 用 是 大 家 默认 而 且 可 靠 的 
选择 。 尤 其 是 在 你 设计 系列 应 用 的 时 候 ， 更 要 注意 它们 的 统一 性 和 关联 性 。 

我 非常 认可 Windows Phone 平台 的 “音乐 + 视频 ”功能 组 合 ( 如 图 2-7 所 示 ) 的 做 法 和 设计 理念 ， 
这 确实 是 经 典 的 用 户 体验 案例 。 它 把 所 有 的 与 音乐 和 视频 相关 的 应 用 及 功能 集合 在 了 一 起 ， 变 成 了 一 个 强 
大 应 用 的 组 合 ， 自 成 体系 ， 这 称 作 “ 主 面板 菜单 应 用 程序 中 心 导航 。 它 不 但 让 用 户 在 选择 播放 视听 文件 
的 时 候 非 常 快捷 、 顺 畅 ， 而 且 让 应 用 与 应 用 之 间 形 成 了 更 加 明了 的 相处 与 竞争 机 制 ， 同 时 提供 了 视听 应 用 
下 载 商 店 窗口 ， 使 用 户 的 选择 更 丰富 、 更 快捷 。 
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我 们 的 很 多 工作 、 任 务 和 娱乐 都 不 是 里 一 的 一 项 应 用 瓯 能 完成 的 : 如 果 你 的 微 博 里 需要 加 入 图 片 ， 应 
用 会 引导 你 跳 转 到 照片 浏 吃 功 能 里 ;我 们 在 记录 朋友 电话 号 码 的 时 候 别 饼 记 给 他 提 一 张大 头 照 ， 所 以 把 号 
码 存 入 名 乒 夹 的 时 候 可 以 顺便 跳 转 到 担 照 功 能 ; 我 在 浏 蜗 网 页 的 时 候 ， 会 把 有 价值 的 文字 或 图 片 复 制 下 来 ， 
粘贴 到 记事 本 里 或 者 直接 打开 电子 邮件 ， 友 送 到 我 的 邮箱 里 ， 以 便 日 后 在 电脑 上 继续 编辑 。 我 不 可 能 傻 到 
设计 一 款 应 用 既 能 浏 史 网 页 ， 又 能 仓储 照 厂 ， 还 能 收 友 电子 邮件 和 充当 记事 本 。 因 此 ， 好 的 应 用 不 但 专 一 
而 且 开 放 ， 能 够 和 其 他 应 用 打 成 一 厂 ， 尤 其 是 系统 原 妃 的 功能 ， 把 它们 的 功能 为 我 所 用 ， 也 惰 慨 地 页 献 目 
己 的 功能 去 给 别人 当 配 角 、 打 下 手 。 我 们 虽然 可 以 寄 希 望 于 我 们 的 应 用 能 够 目 成 体系 ， 但 绝 不 能 让 它们 目 
我 封 由、 大 权 独 抗 ， 更 不 能 要 求 用 尸 们 对 你 的 应 用 绝对 忠诚 。 

所 以 ， 我 们 要 足下 心 来 ， 脚 踏实 地 地 把 应 用 里 的 关键 功能 做 专 、 做 精 。 闭 于 从 系统 原 有 的 应 用 中 吸 
收 信息 和 材料 。 同 时 ， 次 要 功能 如 果 和 其 他 应 用 的 主体 功能 重合 ， 那 完全 可 以 放弃 ， 设 一 个 控件 直接 跳 转 
或 链接 过 去 ( 不 过 ， 有 些 功 能 实在 难以 割舍， 我 们 也 可 以 尝试 着 另 开 友 一 个 应 用 ， 使 它们 成 为 应 用 系列 )。 
我 觉得 这 方面 做 得 比较 不 错 的 应 用 有 很 多 ， 比 如 iOS 平台 的 “Fotolr 相册 ( 如 图 2-8 所 示 ) 就 是 一 个 很 


2-8 iOS 平台 的 “Fotolr 相册 ” 
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好 的 双 例 。 这 是 一 球 很 实用 、 也 很 精 壬 的 应 用 。 虽 然 相 册 类 的 应 用 非常 多 ， 但 是 它 能 够 在 设备 之 间 批 量 地 
传输 照片 ， 加 上 极 具 个 性 又 细节 精致 的 界面 设计 ， 让 包括 我 在 内 的 很 多 移动 用 户 无 法 抗拒 。 通 过 图 2-8 可 
以 看 到 ， 软 件 功 能 强大 而 全 面 的 背后 ， 是 iOS 平台 的 一 系列 功能 和 应 用 的 文 援 和 和 衬托。 图像 和 照片 的 导入 
是 依靠 移动 设备 的 担 照 功能 、 剪 切 功 能 和 图 片 浏览 器 ， 而 图 片 的 输出 依靠 了 蓝牙 功能 、Wi-Fi 功能 及 iOS 
邮箱 ， 它 同时 还 具备 不 可 或 缺 的 文件 加 密 功 能 以 及 利用 App Store 应 用 网 上 更 新 的 功能 。 从 表面 上 看 ,我 
们 是 在 使 用 一 款 单 一 的 图 像 沼 理应 用 ， 而 事实 上 是 它 与 多 个 应 用 共同 工作 的 结果 。 因 此 ， 在 开 友 和 设计 应 
用 产品 的 时 候 ， 尽 量 不 要 让 它们 大 封闭 。 打 开 围 墙 ， 才 能 让 它们 更 丰 定 、 更 有 活力 。 

当然 ， 我 们 的 应 用 仍然 是 独一无二 、 充 满 个 性 的 ， 它 可 以 和 其 他 软件 和 睦 相 处 、 互 通 有 无 ， 但 是 它 的 
优势 是 不 可 替代 的 ， 这 样 才能 凸显 出 它 的 价值 。 接 下 来 ， 我 们 谈 谈 如 何 才 能 够 让 我 们 的 应 用 脱 锋 而 出 ， 成 
为 成 干 上 万 个 应 用 中 最 滩 眼 的 那 一 个 。 


2.2.2 ”是 前 无 古人 还 是 出 类 扫 鞭 


在 设计 和 开 必 产品 的 时 候 ， 我 们 会 提出 的 第 一 个 也 是 最 直 日 、 最 关键 的 问题 是 : 用 户 为 什么 会 使 用 我 
们 的 应 用 ? 或 者 确切 一 操 ， 成 干 上 万 个 应 用 摆 在 那里 ， 他 们 和 任 什么 会 用 、 怎 么 会 想到 使 用 我 们 的 应 用 ? 

想 要 理 清 这 个 问题 ， 得 从 两 个 层面 来 分 析 : 一 个 是 我 们 的 产品 是 不 是 和 用 户 的 需求 完美 对 接 ， 解 决 其 
他 任何 应 用 都 无 法 解决 的 问题 ， 能 完成 任何 应 用 都 无 法 完成 的 任务 ， 这 个 属于 功能 层面 ; 另 一 个 融 是 我 们 
的 应 用 产品 能 够 触动 人 心 ， 满 足 了 用 户 的 感性 需求 ， 给 了 他 们 其 他 同类 应 用 无 法 比拟 的 特殊 体验 ， 这 个 属 
于 体验 层面 。 简 单 通俗 地 这 瓯 是， 我 们 的 应 用 产品 是 前 无 百人 还 是 出 类 拔 萃 。 

我 们 先 谈 谈 第 一 个 层面 ， 也 残 是 “前 无 古人 。 

如 果 你 正 准备 做 一 赤 备 筷 录 了 式 的 竺 办 事项 应 用 或 者 是 视频 文件 播放 器 ， 那 么 打开 网 上 移动 应 用 商店 看 
一 看 ， 你 能 确保 你 的 应 用 能 够 与 在 商店 里 摆 厦 的 无 数 同类 产品 有 所 不 同 吗 ” 当 然 ， 也 许 会 有 所 不 同 ， 但 天 
键 是 你 的 与 众 不 同 真 的 是 广大 用 户 所 需要 的 吗 ” 你 真 的 与 众 不 同 地 为 他 们 解决 了 什么 问题 吗 ” 如 果 没 有 ， 
那 你 的 应 用 只 能 被 成 王 上 万 个 其 他 类 似 应 用 给 淹没 ， 除 非 你 纯粹 是 为 了 好 玩 ， 或 是 满足 目 己 的 个 性 需求 ， 
那么 你 的 产品 最 多 是 一 个 展示 你 技术 的 演示 品 。 因 此 , 我 们 要 理性 地 分 析 市 场 、 分析 用 户 , 据 弃 那些 “鸡肋 
的 想法 ， 做 有 价值 的 应 用 。 

我 们 还 可 以 去 创造 一 些 不 同 于 大 众 的 优势 ， 要 么 是 友 明 了 一 个 全 新 的 工作 原理 或 是 交流 理念 ， 要 么 是 
莘 握 了 无 法 模仿 的 局 科技 技术 或 是 专利 成 果 。 当 然 ， 你 还 可 以 深入 了 解 一 些 特 定 的 和 人群， 为 他 们 量 身 打造 
一 款 贴心 的 应 用 程序 …… 到 怕 还 会 有 我 们 没有 想到 的 很 多 思路 ,都 能 够 达到 我 们 的 应 用 “前 无 古人 的 目标 。 
但 是 与 此 同时 ， 我 们 还 必须 考虑 一 下 ， 我 们 要 通过 这 球 应 用 得 到 什么 ? 是 为 了 展示 你 的 优势 ? 还 是 友 泄 目 
己 的 激情 ? 或 者 是 提高 你 公司 的 类 名 度 ? 还 是 这 人 句 话 : 如 果 没 能 真正 地 迎合 用 户 的 心理 ， 满 足 用 户 的 实际 
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需要 ， 仍 然 会 家 他 们 无 情 地 抛 借 。 所 以 ， 深 入 地 做 好 用 户 调查 和 分 析 ， 永 远 是 第 一 位 的 。 有 时 候 我 们 必须 
放 茎 目 己 的 兴趣 和 一 些 一 相 情 愿 的 想法 ， 学 会 站 在 用 户 的 角度 看 ， 反 过 来 问 问 目 己 : 你 的 应 用 到 搬 能 给 我 
市 来 什么 ? 他 到 讨 能 给 我 解决 什么 问题 ? 在 下 面 的 草 证 里， 我 们 会 具体 地 和 大 家 探讨 如 何 做 好 用 己 的 调查 
和 分 析 。 

那么 在 另 一 个 层面 ， 我 们 也 要 谈 谈 怎 么 做 出 一 个 “出 类 拔节 ”的 应 用 。 

我 们 挖空心思 想 出 来 了 似乎 “前 无 古人 ”的 好 主意 ， 在 移动 应 用 商店 里 却 友 现 已 经 被 别人 实现 或 者 已 
经 实现 了 大 部 分 ， 这 样 的 事 司 空 见 惯 。 等 一 下 ， 先 不 用 着 急 打 退 堂 评 ， 因 为 无 论 如 何 我 们 的 应 用 和 他 们 的 
不 一 样 ， 昌 然 想法 相同 或 相似 ， 但 我 们 完全 可 以 把 它 做 得 与 众 不 同 、 独 树 一 帜 。 


2.2.3 如何 才 能 独树一帜 


著名 的 交互 设计 师 Josh Clark 在 他 的 一 本 闭 作 里 说 了 这 样 一 句 话 : “我 们 有 时候 可 以 像 思 考 人 类 一 样 
去 思考 应 用 。 作为 人 类 ， 我们 都 长 了 同样 的 四 肌 和 五 官 ， 同 样 地 用 语言 交流 、 用 双 腿 行走 ， 同 样 地 具备 
七 情 六 欲 ， 会 喜 仅 过 乐 。 但 是 我 们 很 少 或 者 从 来 不 会 互相 之 间 识 别 销 ， 因 为 我 们 每 个 人 都 有 一 个 很 明确 的 
区 别 于 他 入 的 特征 。 是 什么 让 我 们 役 此 区 分 ”下 先 ， 当 然 是 长 相 了 。 在 汇 江 人 海中 ， 长 相好 的 人 往往 有 吸 
引力， 容易 脱 和 项 而 出 而 袜 大 家 注意 。 但 是 也 有 很 多 长 相 平 平 的 人 同样 受到 大 家 的 欢迎 ， 梓 大 众 所 天 注 ， 那 
又 是 什么 让 他 与 众 不 同 、 独 树 一 帜 呢 ?” 是 个 性 ， 与 众 不 同 的 个 性 。 人 的 个 性 可 以 有 很 多 的 层面 ， 长 相 也 可 
以 算是 其 中 之 一 ， 更 重要 的 是 性 格 ， 比 如 交流 方式、 处 事 广 法、 胶体 动作 和 行为 特点 等 ， 这 些 都 可 以 成 为 
人 们 区 别 于 他 人 而 独树一帜 的 个 性 ， 而 好 的 性 格 确实 很 容易 打动 别人 ， 农 别人 接受 和 喜欢 。 我 认为 ， 人 的 
个 性 中 最 重要 的 层面 是 人 的 格调 和 境界 ， 这 是 在 我 们 漫长 的 人 生 阅 历 中 积累 出 来 的 精华 ， 是 他 人 翌 全 莫 及 
而 又 无 法 模仿 和 超越 的 。 

思考 完 人 类 ， 我 们 来 体会 移动 应 用 设计 ，Josh Clark 的 这 句 话 真 的 给 了 我 很 大 的 启 友 。 想 要 在 成 干 
上 万 个 移动 应 用 中 独树一帜 ,我们 必须 理性 地 分 析 ， 冷 静 地 判断 。 首 先 ， 我 们 要 和 其 他 同类 应 用 的 “长 相 
有 所 区 别 ， 包 括 形式 上 的 区 别 : 我 们 设计 的 色调 有 没有 和 他 们 “ 撞 衫 。? 我 们 的 名 称 是 不 是 和 他 们 雷同 或 
者 容易 兹 少 ? 我 们 的 控件 位 置 和 导航 模式 是 不 是 和 他 们 相同 ? …… 在 一 一 区 分 的 同时 ， 我 们 的 还 要 比 他 们 
的 “长 得 好 看 、 有 吸引 力 。 改 挥 你 过 人 的 设计 本 领 ， 勾 画 出 更 加 精美 的 造型 ， 搭 配 出 更 加 可 人 的 色彩 ， 
制作 出 更 有 视 咒 冲击 力 的 效果 …… 不 过 ， 仅 仅 到 这 一 步 还 是 不 够 的 。 

我 们 要 在 “个 性 ”上 达到 真正 的 独树一帜 。 无 论 是 视觉 上 还 是 应 用 体验 上 ， 有 了 个 性 的 应 用 才能 真正 
与 众 不 同 ， 独 树 一 帜 。 当 然 ， 创 造 个 性 也 得 以 用 尸 为 中 心 。 比 如 ， 我 们 可 以 创造 出 一 套 独 特 的 奖励 机 制 |， 
增加 用 户 的 成 惑 感 ; 还 可 以 针对 特定 的 人 群 ， 提 炬 出 他 们 的 共性 ， 把 它 打造 成 目 己 的 个 性 ; 还 可 以 抓 住 用 
户 的 好 奇 心 ， 虚 构 出 一 些 事件 但 没有 结果 ， 再 定期 友 布 事情 的 进展 ， 或 者 虚构 一 个 人 物 ， 定 期 透露 他 的 绯 
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同等 。 然 而 ， 最 实际 的 莫 过 于 能 够 创造 出 比 别 人 更 简单 有 效 的 解决 问题 的 万 法 ， 或 者 解决 同样 的 问题 能 更 
便宜 甚至 不 花 钱 。 

下 面 我 们 比较 一 下 几 款 常用 的 移动 交流 应 有 用。 当然， 最 传统 的 移动 交流 方式 肯定 是 短信 了 ，Android 
上 的 短信 平台 采用 的 是 实时 对 话 的 方式 ， 界 面 采 用 Android 一 贯 的 设计 风格 ， 简 单 大 气 ( 如 图 2-9 左 图 
所 示 )。 与 iOS 短信 平台 对 话 泡 泡 的 方式 不 同 ， 它 在 交流 过 程 中 可 以 同时 看 到 双方 的 头像 ， 不 但 把 来 言 和 
去 语 分 得 清 清楚 楚 ， 还 增强 了 对 话 的 体验 感 ， 让 我 们 随时 都 能 清楚 在 和 哪 一 位 对 话 。 此 外 ， 我 们 不 需要 把 
界面 拖 转 回 顶 端 ， 融 可 以 点 选 右 上 角 的 电话 拨 出 和 添加 附件 按钮 ， 这 一 点 也 比 iOS 短信 平台 更 加 人 性 化 一 
些 ， 而 且 婚 方便 、 又 醒目 。 我 个 人 认为 ， 友 送 短信 的 折纸 飞机 图 标 是 个 之 点 。 

微 信 〈 如 图 2-9 中 图 所 示 ) 成 为 时 下 最 受 移 动用 户 热 兵 的 移动 聊天 交友 工具 , 绝 不 是 偶然 的 。 首 先 ， 
它 使 用 网 络 流量 的 传输 方式 取代 了 短信 传输 ， 为 用 户 节 省 了 不 小 的 开销 。 同 时 ， 按 住 说 话 “ 功能 不 但 成 
残 了 不 爱 打字 的 懒 人 们 , 还 极 大 地 增强 了 实时 对 话 的 体验 感 , 好 像 在 用 对 讲 机 一 样 , 这 不 但 提高 了 交流 速度 ， 
也 缓解 了 触 屏 手机 打字 不 方便 的 缺点 。 然 而 ， 微 信 ”最 有 具 个 性 的 还 得 算是 “附近 的 人 和“ 摇 一 摇 ”功能 ， 
用 户 可 以 通过 这 些 功 能 了 解 和 认识 附近 同样 使 用 “ 微 信 的 用 户 ， 增 加 了 交流 和 交友 的 随机 性 和 多 元 化 。 

Google 公司 在 2011 年 推出 的 交流 平台 “Google+”( 如 图 2-9 右 图 所 示 ) 更 是 把 这 种 多 元 化 做 到 
了 极致 。 在 移动 平台 上 ， Google+ 除了 具有 了 聊天、 交友、 查看 更 新 和 观看 视频 等 基本 功能 之 外 ， 还 有 具 
备 名 叫 Huddle 的 群 组 聊天 功能 。 与 Facebook 和 Twitter 的 应 用 不 同 ，Google+ 的 移动 应 用 人 允许 用 户 同 
时 和 多 位 朋友 聊天 ， 大 家 可 以 一 起 制订 计划 或 消磨 时 间 。 


周末 的 会 议 没有 取消 吗 ? 


没有 取消 ， 只 是 时 间 推 迟到 
了 4 点 半 ， 
; SD 
人 
-so 


来 之 前 先 通 个 电话 ， 磊 便 把 你 
| 


对 了 ,如 果 方 便 ， 帮 我 看 看 上 次 
你 怎么 那么 喜欢 打字 - 9 


触 屏 手机 打字 很 麻烦 ， 还 是 | 多 
发 语言 吧 


上 线 的 android 应 用 下 载 量 如 
向 ， OR 


BE sn 
键入 信和 


图 2-9 Android 平台 上 的 “短信 ”( 左 图 ) 、“ 微 信 ”( 中 图 ) 和 “Google+”( 右 图 ) 
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同样 是 移动 交流 方式 , 或 者 简单 地 说 , 同样 是 “ 聊 个 天 ， 以 上 的 几 个 应 用 都 通过 自己 独 具 一 格 的 方式 ， 
让 用 户 感 受到 了 不 同 的 个 性 体验 。 可 见 ， 只 要 我 们 友 挥 目 己 无 穷 的 想象 力 ， 完 全 可 以 在 同类 的 应 用 中 胶 疾 
而 出 。 因 此 ， 我 们 应 该 把 精力 更 多 地 放 在 设计 更 加 科学 的 界面 布局 、 挖 所 更 多 的 个 性 体验 、 创 造 更 具 友 展 
潜力 的 体验 模式 上 面 。 打 造 好 自己 的 “ 容 够 ， 塑 造 好 自己 的 “个 性 ， 设 计 出 与 众 不 同 、 独 树 一 帜 的 完美 
Wy 用 。 

同时 ， 我 们 也 要 知道 ， 并 不 是 有 个 性 就 一 定 会 受 欢 迎 ， 比 如 有 些 人 为 了 追求 个 性 而 远离 了 大 众 ， 更 有 
些 人 甚至 把 偏执 和 丑陋 当成 了 个 性 。 在 移动 应 用 中 ， 也 不 之 这 样 的 糟粕 作品 ， 它 们 一 味 地 追求 视 党 特效 或 
者 弄 出 些 哗 众 取 究 的 低俗 内 容 。 因 此 ， 在 设计 移动 应 用 的 过 程 中 ， 我 们 要 好 好 把 握 好 上 自己 的 优 民 个 性 。 怎 
么 把 握 ? 有 参照 或 标准 吗 ” 当 然 有 ， 那 瓯 是 用 户 的 感受 。 还 是 同样 的 章 理 ， 我 们 的 成 败 与 售 的 天 键 焉 在 于 
对 用 户 的 分 析 与 了 解 。 那 么 接 下 来 ， 我 们 融 要 开始 谈 谈 应 该 如 何 去 分 析 用 户 、 了 解 用 户 。 


2.3 了解 应 用 的 使 用 者 


应 用 设计 的 初学 者 很 容易 洛 入 一 个 陷阱 ， 那 惑 是 为 目 己 虚构 的 一 个 理想 化 的 用 户 来 设计 应 用 。 所 谓 理 
想 化 的 用 尸 ， 其 实 束 是 你 想象 出 来 的 用 尸 ， 而 不 是 真实 社会 中 的 用 尸 。 你 可 能 党 察 不 人 到， 这 个 理想 化 的 用 
尸 其 实 束 是 你 目 己 ， 你 是 在 为 自己 而 设计 。 

我 们 一 定 要 打破 这 个 陷阱 ， 抛 开 目 我 的 价值 取向 和 主观 蕊 识 ， 为 他 人 而 设计 。 我 们 设计 和 开 必 应 用 的 
最 终 目 的 ， 殊 是 要 让 其 他 人 喜欢 和 使 用 我 们 创造 出 来 的 产品 ， 绝 不 是 为 了 满足 目 我 价值 和 虚 和 攻心。 所 以 我 
们 必须 要 去 了 解 我 们 的 用 户 ， 了 解 他 们 的 特点 、 他 们 的 需求 ， 从 他 们 的 视角 审视 我 们 的 设计 。 


2.3.1 用 户 细 分 


了 解 用 己 是 一 个 复杂 的 过 程 ， 因 为 每 个 人 都 有 目 己 的 个 性 需求 和 功能 取 同 ， 而 且 用 户 群 体 之 间 存 在 着 
很 大 的 差异 性 。 即 使 我 们 针对 一 个 特定 的 群体 或 企业 设计 应 用 ， 也 仍然 需要 大 泄 围 地 了 解 和 考 但 用 户 的 需 
要 。 当 然 , 如 果 我 们 的 设计 是 针对 一 个 比较 庞大 的 用 户 群 体 , 甚至 是 整个 移动 用 户 , 那么 我 们 需要 做 的 调查 、 
考虑 的 问题 、 面 对 的 各 种 可 能 性 束 会 成 售 增加。 这 了 听 起 来 似乎 有 些 环 手 ， 那 么 应 该 怎样 入 手 去 做 这 件 事情 
呢 ? 总 不 能 跑 到 大 街 上 一 个 一 个 去 询问 吧 | 

我 们 要 做 的 第 一 步 融 是 ， 把 大 量 的 用 户 进行 分 类 ， 划 分 成 较 小 的 群 组 ， 我 们 把 这 一 步 称 为 ”用户 
细 分 ， 如 图 2-10 所 示 。 每 一 个 群 组 都 是 由 具有 相同 特征 的 用 户 组 成 ， 有 多 少 种 用 户 类 型 ， 残 有 多 人 少 
种 方式 来 划分 用 户 。 这 样 ， 我 们 融 可 以 把 大 量 的 用 户 需 求 划 分 成 几 个 可 以 管理 的 部 分 。 下 面 是 几 种 单 见 
的 细 分 万 法 。 
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现实 社会 中 的 用 户 群 


设计 人 员 眼 中 的 用 户 群 


2-10 ”用 户 细 分 


人 口 统计 分 类 。 丈 像 营 销 人 员 针 对 销售 对 象 分 类 的 万 法 。 划 分 的 依据 一 般 包 括 性 别 、 年 龄 、 教 育 
水 平 、 婚 姻 状 况 和 收入 等 。 人 划分 的 范围 可 以 很 粗略 , 比如 年 龄 段 可 以 分 成 儿 董 、 青 年 、 中 年 和 老年 ; 
也 可 以 非常 具体 、 细 致 ， 比 如 把 青年 人 分 成 18~24 岁 、25~30 岁 、31~36 岁 这 3 个 阶段 。 这样 
的 划分 可 以 很 容易 地 把 需求 区 分 并 提炼 出 来 ， 只 是 结果 比较 宽广 ， 对 于 一 些 针对 性 比较 强 的 应 用 
会 显得 有 些 粗 略 。 

心理 分 类 。 束 是 按照 大 家 对 这 个 世界 拥有 的 观点 和 看 法 来 划分 。 这 个 万 法 听 起 来 似乎 有 些 抽 象 ， 
因为 它 涉及 心理 分 析 。 我 们 需要 划分 的 是 与 你 应 用 相关 事物 的 观点 和 看 法 不 同 的 人 和 群 ， 并 以 此 为 
根据 提炼 出 不 同 种 类 的 用 户 需求 。 然 而 ， 心 理 特征 与 人 口 统计 特征 也 奶奶 相关， 比如 ， 同 一 年 龄 
段 的 、 同 一 收入 水 平 的 或 同一 地 域 的 人 们 往往 会 有 相同 或 者 比较 相似 的 观点 ， 但 是 涉及 世界 观 和 
兴趣 点 万 面 的 应 用 ， 人 口 统计 分 类 法 殊 没 有 指导 意义 了 。 

技术 需求 分 类 。 按 照 大 家 对 移动 设备 使 用 的 技术 程度 来 划分 。 对 移动 设备 的 操作 水 平 ， 不 同年 龄 
段 和 教育 水 平 的 人 群 是 不 同 的 。 而 且 我 们 有 时 也 会 去 开 友 一 些 扩 术 型 的 产品 ， 这 对 于 了 解 人 们 是 
人 否 经 党 使 用 移动 设备 、 是 否 经 常 上 网 或 经 常 与 瓜 术 型 产品 打 交 马 是 非常 有 用 的 。 有 些 用 户 需 要 最 新 、 
最 时 尚 的 功能 , 关注 应 用 的 更 新 , 而 有 些 用 户 会 在 大 量 的 功能 面前 感到 恐惧 ,对 操作 设置 无 从 下 手 ， 
我 们 设计 应 用 时 必须 考虑 能 售 容 纳 这 些 不 同类 型 的 用 户 群 。 

社会 角色 分 类 。 人 们 对 应 用 产品 的 需求 有 时 取决 于 他 们 的 社会 或 专业 角色 。 比 如 说 ， 面 对 考试 ， 
教师 和 学 生 对 于 信息 的 需求 束 截 然 不 同 ， 面 对 计算 机 ， 使 用 者 和 开 友 者 对 硬件 的 需求 也 不 尽 相同 。 
因此 ， 定 义 好 使 用 者 的 不 同 角 色 ， 可 以 帮助 我 们 有 效 地 区 分 并 分 析 他 们 的 各 种 需求 。 
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以 上 只 是 众多 用 户 细 分 万 法 中 比较 实用 和 第 见 的 方法 。 在 对 用 户 进 行 分 类 之 后 ， 我 们 还 需要 对 分 类 后 
的 每 一 类 人 和 人群 进行 研究 和 分 析 ， 了 解 他 们 的 特点 ， 观 察 他 们 的 行为 ， 找 到 不 同类 别 用 户 之 间 的 共同 点 ， 设 
法 化 解 不 同类 别 用 户 之 间 的 矛盾 。 那 么 接 下 来 ， 我 们 挑选 出 我 们 的 应 用 所 针对 的 一 类 或 几 类 用 户 进行 分 析 
和 人 研究， 看 看 他 们 到 搬 需 要 什么 ? 


2.3.2 用 尸 研究 


所 谓 用 户 研 究 ， 残 是 通过 收集 必要 的 信息 来 了 解 用 户 的 心理 、 观 点 和 共识 。 一 些 单 用 的 方法 ， 比 如 问 
卷 调 查 、 用 户 访谈 以 及 焦点 小 组 等 ， 都 非常 适合 收集 这 些 信息 。 

1. 问卷 调查 

一 般 来 品 ， 在 菏 个 用 户 届 上 论 费 的 时 间 越 多 ， 束 能 从 这 次 用 尸 研 究 中 得 到 的 信息 越 详细 ， 不 过 这 也 造 
成 了 你 不 可 能 接触 太 多 的 用 户 。 问 卷 调 但是 一 个 比较 科学 、 高 效 的 获取 用 己基 本 信息 的 万 法 。 但 是 问卷 的 
内 容 需 要 我 们 精心 设计 ， 只 有 你 目 己 明确 想 从 用 尸身 上 获得 什么 样 的 信息 时 ， 我 们 的 问卷 调查 才 会 产生 效 
果 ， 才 会 给 你 市 来 宇 贵 的 信息 。 因 此 ， 你 需要 把 你 想 要 得 到 的 信息 尽 可 能 清楚 、 具 体 、 公 式 化 地 表达 在 你 
的 问 才 上， 这样 才能 确保 你 获得 正确 的 答案 。 


我 们 任 为 “ 己 术 品 收藏 ”应 用 进行 用 户 需求 分 析 时 ， 针 对 忆 术 爱好 者 和 对 忆 术 资讯 感 兴趣 鸭 人 人 制 
作 了 这 个 调 但 问卷 ， 主 要 目的 是 想 通 过 问卷 了 解 用户 群体 的 群 类 特 氮 、 相 天 兴趣 氮 以 及 选择 的 移 动 平 
全 和 附加 功能 。 为 了 使 收集 的 信息 尽 可 能 全 面 ， 我 人 把 问卷 设计 得 比较 评 细 ,但 又 考虑 到 受 访 者 的 出 
心 程 瑚 ， 所 以 允 是 进行 了 相当 大 的 取舍 。 问 卷 设 计 了 两 个 版 本 ,分别 是 网 页 的 和 纸 质 的 ， 图 2-11 展 
不 的 是 纸 质 的 问 千 。 


2. 现场 调查 

现场 调查 与 问卷 调查 的 区 别 在 于 ， 前 者 是 和 直接 去 观察 和 了 解 用 户 在 日 弟 生 活 中 的 情景 和 具体 行为 ， 而 
不 是 由 他 们 自己 来 描述 。 它 的 优势 是 直观 、 全 面 而 且 细 致 ， 唯 一 的 缺点 就 是 它 有 时 候 会 非常 费时 而 且 昂 贵 。 
只 要 你 有 有 宛 足 的 时 间 、 足 够 的 人 力 和 充足 的 资金 ， 现 场 调理 会 使 你 对 用 户 群 有 更 加 深刻 的 理解 ， 全 面 细致 
的 现场 调理 长 全 可 以 解释 一 些 无 法 通过 其 他 万 法 获知 的 用 户 行为 。 

现场 调查 的 万 式 也 比较 多 样 。 在 一 些 情况 下 ， 我 们 可 以 使 用 一 种 轻 量 级 、 低 成 本 的 万 法 来 实施 。 比 如 
针对 “艺术 品 收藏 应用， 我 们 可 以 在 美术 馆 或 博物 馆 观 察 每 一 个 专题 展览 的 人 数 、 每 个 人 在 展览 中 逗留 
的 时 间 长 短 以 及 是 否 会 在 看 完 作 品 后 主动 购买 相关 画册 或 明信片 等 产品 。 不 过 ， 在 现场 调查 之 前 ， 我 们 要 
进行 充分 、 合 理 的 任务 分 析 ， 看 看 它们 是 谷 可 以 为 你 的 应 用 设计 市 来 有 价值 的 信息 或 灵感 ， 或 者 能 够 对 你 
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已 经 成 形 的 想法 或 思路 进行 验证 ， 千 万 别 把 时 间 和 精力 放 在 一 些 琐 碎 的 或 旦 无 意义 的 调查 上 。 


51work6.com 
“艺术 品 收藏 ”应 用 用 户 需 求 调 查 问 关 


我 们 非常 需要 您 的 意见 与 建议 ,使 我 们 可 以 更 好 地 为 您 服务 .为 了 能 使 我 们 更 准确 地 理解 您 的 意见 和 建议 , 更 好 地 完善 我 
们 的 应 用 产品 ,真诚 地 希望 您 能 给 我 们 准确 .认真 .如 实 .完整 的 信息 反馈 ， 非常 感谢 您 填写 我 的 问卷 ! 


1. 您 的 性 别 :  * 男 * 女 
2. 您 的 年 龄 : 
3. 您 所 在 的 城市 : 
4. 你 的 学 历 : 
5. 您 的 职业 : 
6. 您 所 在 的 岗位 是 : 
7. 您 的 月 收入 : 
8. 你 是 否 经 常用 手机 或 平板 电脑 上 网 : * 是 * 西 
9. 您 每 月 下 载 应 用 消费 的 资费 情况 是 : 
10. 您 通常 了 解 艺术 作品 的 渠道 是 什么 ? [多 选 题 ] 
* 网 络  * 报纸 杂志  * 电视 收藏 栏目 * 收音 机 。 * 画廊 或 美术 人 馆 。 * 其 他 
11. 您 是 否 经 常 购买 艺术 品 或 是 相关 的 产品 及 画册 
* 经 党 * 偶尔 * 从 不 * 仅 购 买 画 册 或 工艺 产品 
13. 您 使 用 移动 设备 是 什么 应 用 平台 * [多 选 题 ] 
* 苑 困 * Android #* Windows Phone ”#* 其 他 
15. 在 过 去 的 一 年 中 大 约 下 载 了 多 少 款 移动 应 用 : 
16. 您 喜欢 哪 一 类 艺术 作品 *[ 多 选 题 ] 
* 传统 国画 * 传统 西 画 * 现代 艺术  * 悦 塑 ”* 工艺 品 * 其 他 
18. 您 对 下 列 哪些 资讯 应 用 比较 感 兴趣 ?( 限 选 8 条 以 内 ) * [多 选 题 ] 


* 理财 * 插 事 * 彩票 * 之 术 瞧 划  * 社会 新 闻 

* 姓 乐 新 闻  * 体育 新 闻 ”* 了 时尚 搭配 * 健康 养生 * 家 居 婚 嫁 

* 车 闻 异 事 ”* 深度 报道 ”* 女性 生活 、 人 情感 ”* 图 卢 新闻 。 * 财经 

* 房产 二 汽 * 评论 * 去 题 * 其 他 
20. 您 会 相信 网 上 的 评级 信息 的 权威 性 ， 进 而 将 评级 信息 作为 参考 吗 ? 

* 会 * 不 会 


图 2-11 “艺术 品 收藏 ”应 用 的 用 户 需 求 调查 问卷 
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2.3.3 ”用户 测 试 


这 种 用 户 调 查 万 式 主要 友 生 在 项 目 进 展 过 程 中 | 间 ， 而 不 是 在 项 目 开 始 之 前 。 我 们 在 进行 应 用 设计 的 草 
图 绘制 、 原 型 设计 或 者 个 性 化 调整 等 阶段 时 ,都 可 以 把 项 目 进展 的 结果 输入 到 移动 设备 上 , 拿 给 用 户 去 体验 ， 
让 他 们 在 设备 上 受 试 厦 使 用 一 下 ， 我 们 在 一 萝 观 察 、 记 录 ， 认 真 地 听取 他 们 的 意见 和 建议 ， 我 们 通 弟 把 这 
种 形式 称 为 项 目 进展 过 程 中 的 “可 用 性 测试 。 了 这 个 测试 的 内 容 可 以 是 非常 具体 的 高 保 真 原型 ， 也 可 以 是 
一 个 粗粮 的 原型 草图 。 而 测试 的 结果 可 以 帮助 我 们 非常 具体 地 找到 应 用 的 缺点 和 不 合理 的 环节 ， 有 利于 我 
们 进一步 完善 产品 各 万 面 的 功能 需求 。 在 后 面 的 章节 里 ， 我 们 还 会 针对 每 个 环 世 的 设计 ， 有 具体 讲解 可 用 性 
测试 的 万 法 和 目的 。 

天 于 用 户 需求 分 析 和 研究 的 方法 还 有 很 多 种 ， 比 如 对 相似 产品 的 用 户 进行 对 比 、 创 建 一 个 典型 性 的 用 
户 人 物 角色 等 。 最 终 的 目的 瓯 是 要 了 解 这 些 应 用 的 使 用 者 到 搬 需 要 什么 ， 在 这 些 需求 里 我 们 应 该 优 移 考 虑 
哪 一 点 ， 真 正 地 站 在 他 们 的 角度 上 ( 包括 心理 上 和 生活 方式 上 )， 寻 求 我 们 应 用 的 功能 点 和 操作 方式 。 
有 把 这 些 信息 收集 全 面 ， 我 们 才 可 以 进入 到 用 户 体验 设计 的 下 一 步 流 程 : 应 用 的 创意 和 构思 阶段 。 
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当 一 个 项 目 真 真切 切 地 放 在 面前 的 时 候 ， 再 有 经 验 的 设计 师 也 会 有 些 无 从 下 手 ， 毕 竟 创 意 或 灵感 这 类 
乐 西 不 是 这 来 瓯 能 来 的 。 而 且 ， 赵 是 有 经 验 的 设计 师 融 越 能 体会 到 一 点 ， 那 惑 是 你 越 是 级 尽 脑汁 地 铀 牛角 
尖 ， 灵感 和 创意 束 好 像 离 你 越 来 越 远 。 它 们 的 出 现 往 往 是 在 不 经 蕊 间 ， 有 了 时候 是 在 浏览 杂志 或 报纸 的 时 候 ， 
有 时 候 是 听 到 了 别人 的 一 句 话 ， 甚 全 有 时 候 会 从 睡 获 中 产生 。 

我 们 通常 会 认为 : 灵感 ， 就 是 我 们 在 一 生 中 知识 不 断 的 积累 ,人 生 阅 历 不 断 的 增加 ， 在 动脑 子 的 时 候 ， 
束 会 灵光 一 现 地 内 现在 你 的 大 脑 里 ， 源 源 不 断 地 产生 。 和 真 的 是 这 么 简单 吗 ? 有 没有 一 些 方 法 能 够 有 效 地 把 
尼 激 友 出 来 ? 借助 团队 的 力量 ,能 舍 使 创意 和 灵感 的 产生 变 得 更 加 迅速 ， 更 加 丰富 ， 更 加 开阔 ? 在 本 章 里 ， 
我 们 会 在 项 目 创意 阶 段 为 大 家 提供 一 些 帮 助 ， 谈 谈 如 何 打开 思路 ， 激 上 友 灵 感 ， 抓 住 有 价值 的 线 率 ， 细 化 你 
的 创意 内 容 ， 最 终 完成 用 尸体 验 设 计 的 第 一 个 阶段 :原型 草图 设计 。 


3.1 会 玩 “ 头 脑 风 暴 ” 吗 


当 我 说 出 这 个 词汇 的 时 候 ， 很 多 读者 恐怕 会 望 文生 义 地 认为 ， 头脑 风暴 ， 惑 是 充分 地 展开 自己 的 想 
象 力 ， 让 你 的 头脑 像 风 暴 一 样 友 挥 联想 ， 或 者 是 让 你 的 头脑 经 受 风 暴 一 样 的 冲击 。 其 实 这 是 曲解 了 它 的 合 
义 , 毕竟 它 是 一 个 外 来 词汇 , 英文 为 : brainstorming 。 我 们 来 看 看 《牛津 高 阶 英 汉 双 解 词典 》 对 它 的 解释 : 
Away of making a group of people all think about sth at the same time, often in order to solve a 
problem or to create good idea.， 翻译 过 来 就 是 : “单单 为 了 解决 一 个 问题 或 萌发 一 个 好 创意 ， 集 中 一 


组 人 来 同时 思考 某 件 事 的 方式 。 这 有 点 像 我 们 通常 说 的 “集思广益 ”的 意思 。 所 以 从 原意 上 来 看 ， 它 根 
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本 就 不 是 一 个 人 能 完成 的 事情 ， 而 是 要 集中 一 群 人 来 做 的 。 而 我 现在 要 告诉 大 家 ， 它 其 实 是 一 个 “游戏 ， 
我 们 完全 可 以 把 它 当 做 一 个 娱乐 项 目 ， 目 的 束 是 激 友 灵感 、 收 集 创 蕊 。 


3.1.1 一 项 既 有 益 色 有 址 的 游戏 


我 第 一 次 接触 或 者 襄 是 了 解 这 个 游戏 ， 是 从 我 的 一 个 大 学 同学 那里 ， 当 时 我 正在 给 北京 市 西城 经 济 科 
学 大 学 的 广告 专业 上 “创意 理论 课 。 这 门 课 确 实 让 我 很 犯难 ， 我 当时 的 办 法 惑 是 ， 给 学 生 观 摩 大 量 优秀 、 
精彩 的 创意 ， 分 析 它 们 的 思路 ， 寻 找 它 们 的 灵感 来 源 ， 忌 结 它 们 的 成 功 要 点 ， 结 果 收 效 其 微 。 昌 然 这 些 优 
秀 的 创意 能 够 深刻 地 感染 这 些 学 生 ， 但 当 他 们 开始 思考 一 个 全 新 的 主题 时 ， 依 然 非 常 吃力 。 毕 竟 好 的 创意 
是 无 法 参照 、 无 法 模仿 、 更 无 法 到 家 的 ， 它 们 往往 是 为 某 一 件 商品 或 一 个 事物 量 身 定做 的 ， 放 在 别 的 事物 
上 就 会 立刻 失效 。 而 一 个 创意 产生 背后 的 思维 过 程 和 灵感 参照 是 从 创意 表面 无 法 宽 测 的 。 

于 是 ， 我 找到 我 的 这 个 大 学 同学 ， 因 为 他 刚刚 从 英国 的 但 明 翰 大 学 毕业 回国 ， 拿 到 了 这 所 大 学 里 合金 
量 很 高 的 “艺术 与 设计 学 院 ” 的 硕士 学 位 。 我 认为 ， 在 这 样 的 顶尖 大 学 里 ， 他 们 的 创意 课程 应 该 会 有 一 些 
比较 新 鲜 的 方法 或 者 高 超 的 手段 来 提高 学 生 的 创意 能 力 。 结 果 他 的 回答 让 我 很 吃惊 : “我 们 的 创意 课 可 没 
有 什么 花样 ， 只 干 一 件 事 ， 那 束 是 不 停 地 玩 头脑 风暴 。 

头脑 风暴 ， 真 的 那么 神奇 、 有 效 吗 ”为 了 验证 一 下 ， 我 请 了 我 的 这 位 同学 来 客串 一 下 讲师 《反正 他 
当时 还 没有 找到 工作 ), 仿照 伯明翰 大 学 的 课堂 要 求 ， 随 便 找 了 一 个 主题 ,市 着 这 些 学 生 玩 了 两 课时 的 “ 头 
脑 风 暴 。 结 果 出 平 意料 地 好 ， 几 乎 所 有 的 学 生 在 接 下 来 的 一 个 小 时 里 ， 都 拿 出 了 一 个 甚至 好 几 个 很 有 意 
思 的 创意 草图， 而 且 是 轻 轻 松 松 的 、 总 犹 未 尽 的 状态 ， 这 比 起 我 之 前 上 课时 的 课堂 气氛 真是 有 天 二 之 别 。 

说 了 半天 ,既然 “头脑 风暴 ”是 一 个 游戏 , 那 它 到 底 是 怎么 个 玩法 呢 ? 简单 地 说 , 束 像 我 们 前 面 提 到 的 ， 
集中 一 群 人 ， 同 时 对 一 个 事物 或 一 个 主题 量 无 约束 地 友 表 目 己 的 观点 。 由 于 没有 约束 、 没 有 限制 ， 大 家 可 
以 非常 自由 地 思考 ， 展 开 目 己 的 联想 ， 大 声 把 它 襄 出 来 ， 但 不 允许 批评 ， 而 说 出 来 的 结果 有 可 能 激 友 出 了 
别人 更 多 的 观点 和 和 联想， 继续 大 声 说 出 来 ， 不 断 地 激 友 ， 不 断 地 联想 ， 不断 地 大 声 说 出 来 ， 把 所 有 的 观点 
记录 下 来 ， 最 后 对 这 些 观点 进行 评估 ， 提 炼 出 有 价值 的 观点 或 想法 。 所 以 我 们 看 到 ，“ 头脑 风暴 ”的 特点 
瓯 是 让 人 们 小 开 思 想 ， 不 同 的 设想 在 相互 说 撞 中 ， 激 起 脑海 中 的 创造 性 风暴 。 

以 上 提 到 的 是 “头脑 风暴 ”的 第 一 种 玩法 ， 我 们 通常 称 作 “创造 性 风暴 ”， 它 也 可 以 作为 游戏 的 第 一 
个 环节 ， 也 融 是 说 我 们 的 游戏 可 以 继续 玩 下 去 。 在 “创造 性 风暴 ， 中， 我 们 可 能 得 到 很 多 的 思路 和 想法 ， 
哪 一 个 是 最 好 的 或 是 最 可 行 的 呢 ? 这 往往 很 难 取舍， 此 时 可 以 对 这 些 观点 或 者 万 案 逐 一 提出 质疑 ， 所 有 的 
人 开始 质疑 之 前 得 到 的 观点 或 思路 , 思考 它们 的 缺点 和 星 尊 , 大 声 培 出 来 , 不 断 地 记录 下 来 。 真 金 不 怕 火 炼 ， 
最 成 功 的 观点 或 是 最 可 行 的 方案 最 终 会 脱 甘 而 出 , 这 就 是 “头脑 风暴 ”的 第 二 种 玩法 或 者 说 是 第 二 个 阶段 ， 
我 们 称 为 “质疑 性 风暴 。 当 然 ， 有 些 时 候 我 们 可 能 不 需要 第 二 个 阶段 ， 问 题 融 已 经 解决 了 ， 但 对 于 有 些 
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思路 或 是 方案 “质疑 性 风暴 ”会 更 加 重要 , 它 可 以 把 一 些 不 够 成 熟 的 想法 变 得 完善 , 把 方案 中 的 漏洞 补 齐 ， 
增强 实现 它 的 可 行 性 。 

既然 “头脑 风暴 ”这 么 好 玩 又 这 么 有 益 ， 我 们 就 马上 开始 玩 吧 ! 先 别 急 , 成 功 地 完成 一 次 “头脑 风暴 ” 
游戏 并 不 是 一 件 容易 的 事 ， 首 先 我 们 要 清楚 这 是 一 个 多 人 游戏 ， 同 时 也 是 一 次 会 议 ， 这 里 是 否 存在 会 谈 机 
制 和 团队 意识 的 因素 呢 ? 既然 是 游戏 ， 是 否 应 该 有 一 整套 的 游戏 规则 ? 要 想 成 功 地 得 到 游戏 结果 ， 
需要 一 些 经 验 ? 所 以 接 下 来 ， 让 我 来 一 一 告诉 大 家 “头脑 风暴 ”游戏 的 要 点 、 规 则 和 经 验 。 

“头脑 风暴 ”的 会 议 流程 如 下 所 示 。 

(1) 确定 明确 的 方向 或 议题 

(2) 选择 不 同 背 景 的 人 员 5 ~ 15 人 。 

(3) 要 求 参 会 者 大 声 说 出 想法 而 不 许 批评 。 

(4) 主持 人 不 能 限制 思维 的 方向 、 类 型 和 数量 。 

(5) 由 记录 员 记 录 下 所 有 的 想法 。 

(6) 讨论 、 评 估 结 果 ， 和 筛选 出 最 佳 创 意 ( 如 果 难 以 取舍 ， 可 继续 进行 “质疑 性 风暴 ”)。 


为 了 让 六 家 能 够 更 好 地 体会 “头脑 风暴 ”的 真 买 感 殉 ， 企 接 下 来 的 儿 和 万 里 ， 我 们 会 把 “ 己 术 品 收 
藏 ”应 用 项 目 鸭 筷 者 、 创 总 和 和 收集 守 路 的 过 程 骨 现 出 来 ， 和 大 家 分 享 “头脑 风 暴 ” 的 呈 大 作用 。 侍 此 
特别 感谢 安博 实 训 基地 设计 专业 2011 级 全 班 以 及 2010 级 的 八 位 同学 ， 他 们 非常 上 腾 明 ， 很 善于 利用 
细 呈 激 友 目 己 的 想象 力 ， 捕 近 目 己 的 灵感 


3.1.2 有 了 明确 的 目标 


上 面 我 们 提 到 ， 成 功 地 组 织 一 次 “头脑 风暴 ”会 议 是 很 不 容易 的 ， 它 需要 做 好 充足 的 准备 ， 有 合理 的 
分 工 、 明 确 的 议程 、 有 效 的 前 期 铺垫 和 脑力 激 友 。 完 成 “头脑 风暴 ”后 ， 还 需要 进行 合理 的 评估 、 细 化 
甚至 再 创意 。 然 而 这 一 切 必须 建立 在 确定 一 个 明确 目标 的 基础 上 。 下 面 我 们 束 从 如 何 合理 地 确定 目标 开 
台 谈 起 。 

由 于 头脑 风暴 有 一 定 的 特殊 性 ( 后 面 我 们 会 详细 探讨 ) 不 能 受 任 何 条 条 框框 的 影响 ,鼓励 不 着 边际 、 
天 马 行 空 ， 所 以 似乎 确定 了 明确 的 主题 也 没什么 用 。 因 为 一 旦 “风暴 ”开始 ， 融 很 难 按照 一 个 特定 的 目标 
上 友 展 下 去 ， 大 家 实际 上 是 想到 了 什么 融 训 出 什么 ， 而 且 也 不 许 批 评 。 

事实 并 非 如 此 。 实 际 上 ， 在 这 种 情况 下 ， 有 一 个 明确 而 详尽 的 目标 是 非常 重要 的 。 首 先 ， 这 个 目标 是 
一 个 心理 暗示 ,使 所 有 的 参 会 者 在 思考 之 前 都 有 了 一 个 共同 的 出 发 点 ; 同时 ， 明 确 的 目标 也 是 “头脑 风暴 
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开始 之 前 的 一 个 铺垫 ， 让 会 议 的 主持 人 更 容易 擎 握 和 控制 好 大 家 思考 问题 的 趋 回 ， 少 走 膏 路、 少 忠 题 ， 最 
重要 的 是 , 所 有 的 参 会 者 在 了 解 了 今天 会 议 需 要 解决 的 问题 后 ,都 会 做 到 心里 有 数 , 做 出 目 己 的 推测 和 判断 ， 
事实 验证 有 些 判断 是 非常 长 远 和 超出 预期 的 。 但 是 有 人 鸡 怕 会 问 ， 有 了 这 样 一 个 明确 又 实际 的 目标 ， 会 不 
会 把 大 家 规定 在 一 个 框框 里 ， 影响“ 头脑 风暴 ”的 结果 ， 变 得 不 够 开阔 和 丰富 呢 ? 
在 这 里 ， 我 们 需要 先 明 白 一 点 : 归根 结 底 ， 我 们 玩 “ 头 脑 风 暴 ， 并 不 是 为 了 游戏 ， 而 是 为 了 得 到 实 实 
在 在 的 、 有 价值 的 、 可 行 的 灵感 和 创 晶 。 如 果真 的 是 在 玩 一 个 游戏 ， 比 如 在 聚会 上 或 在 办 公 宇 里 活跃 气氛 ， 
那 我 们 完全 可 以 随便 从 一 个 出 友 点 开始 , 然后 任 其 友 展 下 云 , 结果 最 好 是 越 不 着 边际 、 越 男 类 、 越 搞笑 越 好 ， 
真正 起 到 了 一 个 游戏 的 娱乐 作用 。 但 是 ， 如 果 你 想 让 “头脑 风暴 ”真正 达到 预期 的 效果 ( 比如 获得 创意 和 
思路 )， 融 必须 对 它 的 过 程 和 方向 有 所 干预 ， 这 里 面 最 关键 的 是 主持 人 的 技巧 。 所 以 我 们 要 明白 ， 你 的 目 
标 越 是 清晰 、 明 确 , 束 越 容易 得 到 大 家 的 共识 和 配合 ， 头脑 风暴 ”的 预期 效果 残 会 越 好 。 和 那么， 头脑 风暴 
的 目标 具体 应 该 如 何 制 定 呢 ? 我 们 所 要 设计 的 应 用 程序 内 容 是 不 是 残 可 以 作为 头脑 风暴 的 会 议 目标 呢 ? 
目标 有 很 多 种 ， 下 面 我们 从 两 个 方向 来 谈 谈 制定 目标 的 思路 。 
。 是 长 远 目 标 ， 还 是 近期 目标 。 我 们 所 要 设计 的 应 用 程序 内 容 只 能 算 作 我 们 的 长 远 目标 ， 或 者 说 是 
最 终 目 标 ， 要 想 达 到 这 个 最 终 目 标 ， 我 们 需要 经 历 多 个 层面 的 思考 和 多 个 环节 的 创意 。 比 如 ， 我 
们 要 设计 一 款 对 话 陈 的 交友 聊天 工具 ， 那 下 先 融 要 对 它 的 概念 进行 思考 : 它 对 应 的 用 户 群 是 哪些 ， 
是 建立 在 一 个 什么 样 的 文化 或 社会 现象 上 的 ， 它 属于 哪个 门类 的 应 用 群 ， 等 等 。 完 成 了 这 些 思 考 ， 
我 们 还 要 对 这 球 应 用 的 形式 进行 创意 : 是 以 交友 为 主 ， 打 造 大 型 交友 社区 功能 呢 ， 还 是 以 聊天 对 
话 为 主 ， 加 强 语 音 、 视 频传 输 或 图 片 浏览 功能 ; 或 者 独辟蹊径 出 一 套 全 新 的 交流 万 法 。 大 的 方 回 
确定 下 来 ， 我 们 还 要 分 析 这 个 应 用 所 需 的 功能 : 包括 哪些 功能 点 ， 分 成 哪 几 个 功能 模块 ， 等 等 。 
之 后 ， 我 们 还 要 对 应 用 有 具体 的 导航 形式 、 探 件 安 排 、 视 党 色彩 、 了 字体 样 式 等 一 一 进行 创意 和 讨论 。 
大 家 可 以 体会 到 ， 以 上 每 一 个 环节 实际 上 都 是 至 天 重要 的 ， 也 是 达到 完美 用 户 体验 所 必须 面 对 的 
难题 ， 但 我 们 都 可 以 通过 “头脑 风暴 ”的 方式 ， 针 对 这 些 难题 ， 挖 气 和 整理 出 最 佳 的 解决 办 法 ， 
甚至 包括 应 用 的 名 称 、 图 标 或 logo 等 很 多 具体 的 细节 ， 都 可 以 通过 “头脑 风暴 的 方式 寻找 灵感 。 
以 上 所 提 到 的 都 是 为 了 实现 长 远 目标 而 针对 各 个 环节 和 层面 派生 出 来 的 短期 目标 ， 它 们 都 是 实 实 
在 在 、 吸 竺 解决 的 议题 。 
。 是 具体 目标 ， 还 是 抽象 目标 。 在 制定 “头脑 风暴 ”的 目标 和 议题 时 ， 为 了 得 到 更 好 的 效果 ， 我 们 
还 需要 把 握 议题 的 “精度 ”和 “广度 ， 也 惑 是 把 握 所 谓 的 具体 目标 和 抽象 目标 。 比 较 具 体 的 议题 
能 使 与 会 者 较 快 产生 设想 ， 主 持 人 也 较 容 易 擎 握 ， 但 是 结果 往往 也 会 比较 集中 、 具 体 、 半 一。 由 
于 圈定 了 过 于 具体 的 范围 ， 结 果 不 够 丰 昌 和 随机 。 比 较 抽 和 象 和 安 观 的 议题 引 友 设想 的 时 间 可 能 较 
长 ,但 设想 的 创造 性 也 可 能 较 强 。 由 于 议题 的 抽象 性 造成 思考 泄 围 模糊 , 所 以 在 没有 约束 的 情况 下 ， 
可 以 区 分 地 友 挥 想象 力 ， 其 结果 无 论 是 数量 上 还 是 广度 上 都 会 比较 丰硕 。 


第 3 章 “讨论 与 初步 设计 一 完成 原型 的 草图 设计 


确定 好 “头脑 风暴 ”的 目标 和 议题 了 , 下面 是 不 是 束 可 以 开始 我 们 的 游戏 , 畅谈 我 们 的 想法 和 灵感 了 ? 
别 着 急 ， 先 看 看 我 们 的 人 手 够 不 够 ， 好 好 分 一 下 工 。 


任 构 轧 “ 也 术 品 收藏 ”这 个 应 用 的 用 户 体 临 过 程 中 ， 我 们 先后 进行 了 三 次 “头脑 风暴 ， 其 结 宋 
可 以 在 后 面 的 图 3-1、 图 3-4 和 图 3-5 中 看 到 。 第 一 次 是 住 刚 刚 开 始 寻 找 思路 的 上 时候, 为 了 得 到 更 多 梓 、 
更 厂 阔 的 大路 ， 我 以 “也 术 品 ” 这 个 里 词 为 题目 ， 既 明确 勾 抽 阴 ， 试 图 把 与 己 有 天 的 所 有 概念 和 事物 
一 网 打 尽 ， 然 后 仁 里 面 搜寻 有 价值 或 可 友 展 的 思路 和 线 么 ,结果 个 出 所 料 ， 签 杂 而 且 爱 肿 。 不 过 ， 虽 
然 里 面 个 之 己 我 的 目标 野 个 相 十 的 词汇 ,但 是 即使 我 个 标 出 来 ， 大 家 也 能 看 到 里 面 充 满 了 创 草 的 喝 凡 ， 
给 了 我 大量 的 灵感 。 第 一 多 “头脑 风暴 ” 结 末 的 树 形 图 如 图 3-1 所 不。 

第 次 “六 脑 风 暴 ” 的 题目 丈 比 软 具 体 了 ， 因 为 当时 是 为 了 解决 这 款 应 用 的 功能 结构 ， 所 以 我 以 
“ 乙 术 品 收藏 应 用 平台 ”为 题 ， 在 主持 会 议 的 时 候 控 制 了 一 个 六 的 韦 考 方向 《是 控制 不 是 限制 )， 主 要 
围 比 应 用 时“ 概念 万 向 ”和 “功能 点 ”展开 联想 。 辽 两 个 万 向 一 个 抽 累 、 一 个 具体 ， 买 际 上 解决 的 码 
是 同一 个 问题 。 第 一 次 “头脑 风暴 ”结果 的 树 形 图 如 鲜 3-4 所 示 。 

第 三 炙 “ 头 脑 风 暴 ” 的 右 目 残 更 加 具体 了 ， 因 为 当时 需要 解决 的 问题 也 非 肖 具体 ， 分 列 是 应 用 的 
“控件 梓 式 ”和 也 术 品 浏 砚 的 “ 导 和 所 万 取 -， 措 壳 考 虑 一 下 应 用 的 “图 标 。 当 然 ， 由 于 议题 过 于 具体 ， 
所 得 到 的 结 末 明显 没有 表面 鸭 丰 硕 。 第 三 次 “头脑 风暴 ” 结 末 的 树 形 图 如 图 3-5 所 示 。 


3.1.3 ”有 合理 的 分 工 


一 般 来 说 ， 一 次 完美 的 “头脑 风暴 ”会议 人 数 在 8 ~ 12 人 为 宜 ， 多 的 话 一 般 没有 限制 ， 只 要 你 能 控 
制 得 了 ， 少 的 话 最 好 不 要 低 于 5 人 。 与 会 者 人 数 太 少 ， 不 利于 信息 的 交流 ， 无 法 形成 激 友 思维 所 需要 的 气 
氛 ; 而 人 数 太 多 ， 主 持 人 不 容易 擎 握 会 场 ， 每 个 人 友 言 的 机 会 也 相对 减少 。 同时， 人员 的 身份 和 背景 不 要 
过 于 单一 ， 因 为 相同 行业 或 类 型 的 人 群 ， 思 维 观 念 也 会 比较 类 似 ， 不 利于 “头脑 风暴 ”广度 友 展 及 逆向 思 
维 的 产生 。 

谈 到 人 员 的 “背景 ， 我 们 这 里 并 不 完全 是 指 工 作 或 职务 背景 ， 也 包括 不 同 的 社会 阶层 、 不 同 的 年 龄 、 
性 别 和 性 格 。 对 于 移动 用 尸体 验 设 计 来 如 ,很 重要 的 一 点 是 使 用 不 同 应 用 平台 的 智能 手机 用 户 ， 以 及 有 
着 不 同 兴趣 爱好 的 人 群 。 当 然 ， 一 般 情 况 下 ， 很 难 在 短 时 间 内 找到 这 样 “ 丰 富 ”的 人 群 ， 而 大 多 情况 下 ， 
我 们 使 用 工作 中 自己 的 团队 或 同事 们 。 所 以 ， 我 们 要 尽 可 能 地 去 充实 参与 的 人 群 ， 比 如 团队 成 员 的 家 属 、 
公司 中 不 同 部 门 的 员工 一 一 销售 、 客 服 、 保 安 甚 至 保洁 ， 我 的 忠告 是 干 万 不 要 小 看 每 一 个 人 的 想法 : 有 
的 人 受 的 教育 很 多 、 知 识 很 丰富 ， 但 是 脑子 里 的 观念 却 很 教条 ， 思 维 过 于 远 辑 和 纺 密 ， 有 的 人 没有 受过 
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图 3-1 以 单词 “艺术 品 ” 为 题 的 “头脑 风 
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很 多 的 教育 ， 脑 子 里 没有 条 条 框框 ， 不 受 逻 辑 限 制 ， 往 往 会 给 你 带 来 意 想不到 的 惊喜 ; 还 有 一 种 人 虽然 
知识 有 限 、 想 象 力也 不 太 丰 富 ， 但 是 在 生活 中 有 很 多 独特 的 经 验 ， 在 有 利 的 激 友 下 会 给 你 非常 有 益 的 友 
挥 和 补充 。 

把 人 聚 在 一 起 后 ， 需 要 进行 明确 的 分 工 。 首 先 ， 会 议 需 要 主持 人 ， 这 个 角色 非常 重要 ， 一 般 由 “头脑 
风暴 ”的 发 起 者 自己 来 担当 , 他 需要 对 整个 会 议 的 议程 进行 控制 , 对 议题 进行 解释 , 对 思考 的 内 容 进 行 激发 ， 
对 思考 的 方向 进行 把 握 ， 最 后 还 要 对 思考 的 结果 进行 评估 。 在 这 里 ， 主 持 人 能 否 在 “头脑 风暴 ”开始 的 时 
候 对 议题 做 合理 的 脑力 激发 很 重要 。 简 单 地 说 ， 就 是 引导 大 家 走 进 自己 的 议题 。 这 可 以 是 在 会 议 开 始 的 时 
候 设 计 一 些 铺垫 或 者 插曲 , 比如 看 一 段 视 频 、 讲 一 个 故事 、 看 几 张 招贴 或 者 干脆 自己 先 来 , 自 言 自 语 前 述 “ 风 
暴 ”内容 来 抛砖引玉 。 

同时 ， 当 “风暴 ”的 内 容 偏离 主题 或 者 无 人 发 言 时 ， 主 持 人 一 定 要 及 时 说 出 自己 的 想法 和 思路 ， 既 避 
免 了 冷场 ， 也 潜移默化 地 调整 了 主题 方向 ， 但 是 在 这 个 过 程 中 要 谨 记 不 要 否定 和 批评 别人 的 想法 ， 要 以 平 
等 的 身份 对 别人 的 想法 进行 补充 和 铺垫 。 当 与 会 者 出 现 逻 辑 错 误 、 表 达能 力 不 够 或 者 过 于 吗 嗪 的 情况 时 ， 
主持 人 要 能 够 归纳 出 他 们 所 表达 的 核心 内 容 以 便 记 录 。 我 认为 作为 主持 人 最 重要 的 一 点 就 是 ， 要 有 活跃 会 
场 气氛 的 能 力 ， 因 为 只 有 大 家 都 放松 下 来 了 ， 才 会 产生 更 好 的 效果 。 在 会 议 刚 开始 的 时 候 ， 大 家 都 不 免 会 
有 些 拘谨 ， 不 愿意 先 发 言 ， 甚 至 把 会 议 当 成 了 对 自己 能 力 的 考验 而 变 得 非常 紧张 。 这 个 时 候 ， 主 持 人 一 定 
要 向 大 家 传递 正确 的 心理 暗示 : 这 是 游戏 ， 不 是 会 议 ; 大 家 是 在 帮助 我 构思 ， 没 有 任何 的 测试 性 质 ; 只 需 
要 把 自己 想到 的 东西 很 自然 地 说 出 来 ， 没 有 人 会 批评 或 否定 …… 总 之 ， 只 有 让 与 会 者 尽 可 能 地 处 在 轻松 、 
简单 、 和 谐 的 状态 下 ， 才 能 获得 更 好 的 效果 ， 这 非常 需要 主持 人 的 控 场 能 力 。 

除了 主持 人 ， 还 需要 一 到 两 名 记录 员 ， 把 大 家 的 想法 醒目 地 记录 在 白板 ( 或 黑板 ) 上 ， 让 与 会 者 能 
够 看 清楚 。 记 录 时 要 尽量 简要 ， 最 好 能 够 使 用 单词 来 记录 ， 这 样 就 不 会 局 限 住 思考 的 结果 ， 还 可 以 有 进 
一 步 思 考 和 发 挥 想象 力 的 空间 。 但 是 有 时 候 容易 受到 白板 大 小 的 限制 和 书写 速度 的 制约 ， 因 此 我 们 还 可 
以 安排 另 一 位 记录 员 使 用 电脑 来 记录 ， 直 接 把 “头脑 风暴 ”的 结果 录入 成 电子 文件 ,方便 会 后 的 评估 和 
讨论 。 记 录 “ 头 脑 风 暴 ” 的 软件 我 们 选用 由 美国 Mindjet 公司 开发 的 “Mindjet MindManager ”( 如 图 
3-2 所 示 )， 它 的 树 形 结构 记录 功能 非常 适合 记录 发 散 式 的 点 状 思维 ， 而 且 操作 简单 ， 移 动 、 修 改 和 调整 
起 来 非常 直观 。 
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图 3-2 用 Mindjet 公司 的 “Mindjet MindManager” 记 录 “ 头 脑 风 暴 ” 


议题 选 好 、 分 工 完成 后 ， 我 们 融 可 以 开始 “头脑 风暴 ”了 ， 其 中 会 有 很 多 需要 注意 的 地 方 ， 下 面 我 们 


简要 介绍 一 下 。 


3.1.4 安排 好 合理 的 环境 和 议程 


想 要 得 到 理想 的 “头脑 风暴 ， 结果 ， 很 多 细节 是 需要 非常 注意 的 ， 其 中 环境 决 不 可 忽视 。 一 般 来 这 ， 
办 公 场 所 的 会 议 宇 是 比较 适合 的 ， 它 设施 齐全 、 安 静 舒 适 ， 但 也 有 产 晴 ， 那 残 是 太 正 式 和 严肃 ， 容 易 让 人 
感 完 到 压力 。 所 以 很 多 人 喜欢 把 大 家 请 到 咖啡 馆 或 者 餐厅 的 包间 里 ， 这 样 的 场合 容易 让 人 放松 下 来 ， 这 对 
于 小 沁 围 的 人 群 是 很 适合 的 ， 往 往 一 两 从 笔记 本 电脑 ， 几 张 章 稿 纸 束 可 以 把 会 议 开 得 很 像样 。 但 是 如 果 有 
条 件 把 办 公 地 点 的 会 议 至 合理 安排 一 下 ， 那 束 骨 完美 不 过 了 。 


~ 


对 [过 
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如 果 你 有 能 力 安 排 一 下 “头脑 风暴 会 议 的 环境 ,可 以 参考 以 下 几 点 。 当 然 ， 每 一 项 其 实 都 可 以 从 简 ， 
看 你 怎么 取舍 了 。 图 3-3 是 我 们 团队 在 进行 “头脑 风暴 ”时 的 速写 。 


图 3-3 51work6 的 成 员 们 正在 进行 “头脑 风暴 ”会 议 


最 好 选用 圆桌 。 长 条 形 的 会 议 桌 会 给 人 明显 的 等 级 观念 , 而 圆桌 给 人 更 人 性 化 、 更 具 亲 和 力 的 感觉 。 
安放 白板 (或 黑板 )。 用 于 绘制 原型 草图 和 记录 “头脑 风暴 ”的 心智 图 ， 白 板 可 以 着 色 ， 比 黑板 和 
粉笔 的 表现 力 强 ， 但 要 因 环 境 而 定 。 

投影 或 电视 机 。 用 来 进行 脑力 激 友 。 在 “头脑 风暴 ”的 过 程 中 播放 与 议题 相关 的 视频 或 图 片 ， 有 
利于 想象 力 的 友 挥 。 

电脑 和 相机 。 用 来 记录 “头脑 风暴 ”的 内 容 。 如 果 白 板 写 满 了 , 必须 擦 掉 时 , 别 志 了 用 相机 担 下 来 。 
当然 了 ， 我 们 的 秋 能 手机 的 拍照 功能 克 足 够 用 了 。 

草稿 纸 、 铀 笔 、 胶 条 和 马克 笔 。 有 时 候 我 们 需要 把 想法 图 解 在 纸张 上 或 者 直接 以 图 形 的 方式 前述 ， 
再 把 它们 贴 在 折 板 上 连贯 起 来 ， 这 些 琐 碎 的 工具 确实 必 不 可 少 。 

饮料 和 点 心 。 干 万 别 忽 视 ， 这 可 是 放松 心态 、 制 造 和 氛围 的 利器 。 


这 样 ， 一 个 完美 的 “头脑 风暴 ， 会议 环 境 残 实现 了 ， 接 下 来 残 要 安排 好 合理 的 议程 了 。 
一 般 情况 下 ， 会 议 的 时 间 长 度 最 好 安排 在 一 个 小 时 左右 ， 不 要 超过 两 个 小 时 ， 当 然 也 不 要 大 人 简短。 经 
验 表 明 ， 创 造 性 较 强 的 设想 一 般 要 在 会 议 开始 10 分 钟 ~ 15 分 钟 后 才 会 逐渐 产生 ， 而 大 长 的 过 程 则 容易 
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产生 疲 元 感 ,影响 会 议 效 果 。 所 以 , 如 果 需 要 更 多 的 时 间 完 成 议题 ,我 们 可 以 把 它 拆 解 成 几 个 问题 分 期 完成 。 

和 于 会议 开始 的 时 候 ， 如 果 有 人 是 第 一 次 参加 “头脑 风暴 ， 会议， 主持 人 要 先 把 规则 和 要 求 前 述 一 下 ， 
之 后 最 好 把 要 做 的 项 目 和 大 家 分 享 一 人 下， 让 参 会 和 者 了 解 你 的 用 意 、 理 解 你 的 初 袁 ， 做 到 心里 有 数 ， 这 时 融 
可 以 把 今天 的 目标 和 议题 这 出 来 了 。 

在 参 会 者 开始 前述 目 己 的 想法 乙 前 ， 有 两 个 环节 非 单 重 要 : 一 个 是 让 会 场 进入 一 个 放松 和 随意 的 氛围 
中 ， 另 一 个 束 是 有 效 的 思维 和 脑力 的 激 友 。 前 面 我 们 谈 过 ， 这 需要 主持 人 底 谐 幽默 并 具有 较 强 的 感染 力 。 
当然 ， 也 可 以 通过 一 绎 手段 来 达到 ， 比 如 小 音量 播放 一 些 轻松 的 育 景 音 乐 ， 播 放 一 绎 与 今天 的 主题 相 天 的 
视频 卢 段 或 图 片 。 注 晶 ， 干 万 不 要 播放 其 他 设计 师 设 计 的 同类 产品 的 创 晶 ， 那 样 会 把 大 家 引入 上 途 ， 失 去 
应 有 的 想象 力 。 最 好 是 与 主题 相 天 的 一 些 线 奈 。 如 果 你 要 设计 一 款 购 物 应 用 平台 ， 那 么 你 可 以 给 大 家 看 看 
你 将 销售 的 商品 ， 如 果 你 要 设计 一 款 酒 店 和 机 票 的 预订 程序 ， 那 么 残 给 大 家 浏 哆 一 些 酒店 和 机 场 的 环境 、 
预定 的 流程 和 操作 细 证 ， 如 果 你 要 设计 一 款 寓 车 六 戏 ， 那 束 给 大 家 看 一 些 F1 拉力 赛 的 视频 集 负 。 辟 
能 够 让 大 家 放松 的 同时 ， 在 头脑 中 产生 一 些 实 实在 在 的 联想 和 思考 就 足够 了 。 

激 友 与 会 者 的 想象 力 ， 有 时 候 要 善于 开 一 个 好 头 ， 不 要 指望 参 会 者 能 主动 开始 友 言 ， 他 们 的 友 言 往往 
都 是 从 回答 或 者 补充 你 的 疑问 和 想法 开始 的 。 因 此 ， 要 善于 通过 说 出 浅显 和 直观 的 想法 ， 引 | 导 大 家 说 出 各 
目的 联想 和 思考 结果 。 


为 了 完 亚 “ 忆 术 品 收 藏 ”这 个 应 用 平台 的 用 尸体 给 设 计 , 在 进行 元 第 一 次 以 寻找 岂 路 为 目的 的 “ 头 
脑 风 暴 ” 后 ， 我 们 进行 了 第 一 次 “头脑 风暴 ” 买 号 ， 这 次 的 目的 是 完善 应 用 的 功能 结构 。 在 会 议 表 ， 
我 人 做 了 很 多 准备 ， 首 先 收集 了 一 些 个 同门 类 经 典 纪 木 品 的 高 清国 厂 ， 以 及 不 同 蕊 林 流 派 的 提 卖 行情 、 
欣 间 万 式 和 浅显 的 理论 知识 ， 同 时 允 找 到 了 一 些 己 纪 术 收 藏 相 天 的 广告 、 评 论 的 钢 频 。 

会 议 一 开始 ， 为 了 把 握 气 称 ， 人 在 介绍 完 “ 头 脑 风 暴 ” 要 求 和 我 要 设计 的 应 用 万 向 后 ， 我 先 不 让 六 
家 发 言 ， 而 是 放松 地 听 我 聊 一 聊 忆 术 品 收藏 的 一 坚 收 事 ， 边 听 改 事 边 看 图 面 ， 大 约 十 分 钟 后 ， 大 家 残 
非常 目 然 地 做 出 了 回应 ， 这 时 我 把 目 己 的 一 些 还 不 成 束 的 灵感 和 设想 说 了 出 来 ， 立 记得 到 了 很 多 回应 
和 和 补充。 就 这 样 ，“ 头 脑 风 暴 ” 顺 利 开 始 ，60 分 钟 的 时 间 过 得 很 快 ， 也 很 苑 买 。 通 过 图 3-4 的 树 形 图 ， 
我 们 可 以 看 到 结 末 ， 无 伦 是 内 容 偿 是 数量 都 令 我 比 软 满意 ， 达 到 了 预期 的 效 末 。 
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住 结 尾 的 评 们 中， 我 们 把 几 个 公认 比较 可 行 的 思路 标记 出 来 ， 很 多 想法 虽然 有 些 个 切实 际 其 全 毅 
题 万 里 《天 于 对 作品 进行 个 改 和 拼 赔 ， 这 完全 违 月 了 对 忆 术 收藏 品 乞 术 家 的 坦 重 ， 也 侵犯 了 列 座 广 
权 )， 但 是 我 们 都 把 它们 认真 地 记录 下 来 加 以 评论 ， 因 为 这 才 是 “头脑 风暴 ”最 珍 中 的 部 分 。 


3.1.5 ”畅所欲言 和 莹 村 规则 


在 头脑 风暴 进行 时 ,经 常会 友 生意 想不到 的 事情 ,要 么 会 议 冷 场 ,无 人 友 言 ;要 么 友 言 太 多 ,无 法 整理 ，; 
有 时 还 会 破坏 规则 甚至 产生 和 争论， 这 都 是 很 正常 的 现象 。 作 为 “头脑 风暴 ”的 举办 者 或 主持 人 ， 一定 要 善 
于 驾驭 会 场 气氛 ， 还 要 深刻 理解 游戏 规则 。 这 里 非常 有 必要 解析 一 下 “头脑 风暴 ”的 游戏 规则 。 
。 不 允许 批评 。 从 大 的 方面 来 说 ,批评 会 扼杀 想象 力 的 产生 。 对 于 头脑 风暴 来 说 ,观点 没有 对 与 错 、 
好 与 趟 、 可 行 与 不 可 行 的 区 分 ， 昌 然 我 们 需要 各 种 观点 相互 碰撞 ， 但 是 人 础 撞 的 结果 绝 不 是 淘汰 ， 
而 是 要 产生 更 多 、 更 新 的 观点 和 想法 。 所 以 ， 参 会 者 只 可 在 别人 的 观点 上 补 宛 和 祥 挥 ， 绝 不 能 个 
定 或 凤 低 。 批 评 还 会 使 参 会 者 由 于 思路 不 清晰 或 不 完善 而 郑 于 开口 , 赤 失 了 和 大 家 共同 思考 的 机 会 。 
。 鼓励 天 马 行 空 。 在 不 许 批评 的 前 提 下 ， 主 持 人 还 要 羡 于 敦 励 参 会 者 把 他 们 认为 太 离 僧 的 、 不 可 行 
的 观点 这 出 来 ， 因 为 通过 大 家 的 补充 和 完善 ， 这 些 想 法 也 许 能 转化 成 可 行 的 ， 或 者 这 些 想 法 本 身 
还 可 以 局 友 出 其 他 更 有 创意 的 想法 ， 这 才 是 “头脑 风暴 ”的 精髓 。 因 此 ， 参 会 者 要 打开 心 展 ， 放 
开 思 路 ， 让 思维 自由 邓 验 。 
。 要 追求 数量 。 不 要 在 一 个 创意 点 上 纠结 太 长 时 间 ， 一 定 要 人 在 有 限 的 时 间 里 尽 可 能 多 地 产生 不 同 的 
想法 和 观念 ， 喜 励 标新立异 ， 与 众 不 同 。 头脑 风暴 的 特点 要 求 观点 要 多 样 且 相互 倍 撞 ， 这 样 才 
能 产生 更 新 、 更 成 熟 的 创意 ， 所 以 要 尽 可 能 地 使 各 种 想法 达到 一 定 的 数量 ， 数 量 越 多 ， 效 果 越 好 。 
。 茜 止 交谈 。 主 持 人 必须 注意 要 制止 参 会 者 进行 私下 的 、 无 天 的 交谈 ， 这 会 影响 其 他 成 员 的 注意 力 ， 
妨碍 新 想法 的 创造 。 同 时 主持 人 也 要 善于 制止 友 言 者 进行 补 宛 陈 的 交谈 ， 比 如 过 多 地 解释 目 己 的 
想法 或 补充 一 些 无 用 的 信息 ， 这 样 既 痕 费 了 时 | 间 ， 又 干扰 了 他 人 友 言 。 
。 要 结合 、 改 善 别 人 的 创意 。 拥 有 大 量 天 马 行 空 的 想法 和 观点 并 不 是 我 们 “头脑 风暴 ”的 结果 ， 主 
持 人 要 善于 对 这 些 想 法 进行 整合 ， 它 们 束 像 一 堆 原 矿 ， 需 要 细心 地 整理 、 打 磨 和 提炼 。 我 们 可 以 
通过 “质疑 风暴 ， 来 提炼 ， 也 可 以 把 不 完整 的 想法 结合 起 来 或 改善 。 
从 前 面 的 实例 可 以 看 到 ,， 头脑 风暴 ， 可 以 分 阶段 地 做 ， 也 可 以 反复 地 做 ， 在 进行 中 也 可 以 暂停 ， 通 
过 休息 来 调整 议题 的 进程 。 那 么 ， 在 “头脑 风暴 结束 后 ， 能 个 合理 地 对 所 有 想法 进行 整理 和 评估 ， 融 变 
得 尤为 重要 了 。 
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第 三 次 “头脑 风暴 ”我 们 选择 侍 绘 制 原 型 草图 鸭 过 程 中 。 由 于 面 对 的 问题 已 经 非常 具体 了 ， 因 此 
器 目 也 惑 非 党 明确 ， 分 别 是 应 用 的 “控件 杆 式 ”和 艺术 品 浏 多 的 “导航 万 式 *"， 指 市 考虑 一 下 应 用 的 
图标"。 参 加 的 入 员 也 并 不 是 很 多 ， 请 米 了 图 家 本 人 及 其 家 属 ， 以 及 设计 团队 所 有 成 员 的 家 属 《〈《 完 事 
之 后 难 多 要 聚 个 均 )。 当然 ,由 于 议题 比较 具体 ,所 得 到 的 结 末 〈《 如 图 3-5 所 示 ) 明显 没有 剖面 的 丰 人 饥 ， 


但 是 非常 买 际 、 本 行 。 


ee 
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3.1.6 挑选 出 最 有 前 途 的 想 ; 


在 头脑 风暴 ”结束 后 ， 我 们 还 有 一 些 工作 需要 完成 ， 其 中 有 些 需 要 在 会 议 过 程 中 解决 ， 有 些 工 作 可 
以 在 会 下 元 成 ， 其 核心 束 是 如 何 提炼 出 最 可 行 的 万 案 ， 挑 选 出 最 有 前 途 的 想法 。 

目 先 ， 要 做 的 是 湾 清 所 有 不 清楚 的 表述 和 有 上 收 义 的 条 目 ， 确 保 所 有 的 观点 在 所 有 的 参 会 者 面前 清 有 晰 可 
见 。 把 记录 员 录 入 在 电脑 上 的 所 有 条 目 进行 简单 的 修改 和 整理 〈 这 时 候 白 板 她 怕 会 不 够 用 了 )， 然 后 将 电 
脑 接 入 到 投影 或 电视 屏 因 上 展示 给 大 家 。 如 果 数 据 过 多 ， 无 法 当场 进行 评 佑 ， 可 以 由 记录 员 会 下 警 理 后 ， 
另 选 时 间 安 排 评 估 会 议 。 

接 下 来 ， 融 是 要 删除 曼 无 价值 的 或 者 膨 离 主题 的 条 目 了 ， 这 个 过 程 要 很 慎重 ， 必 须 宛 分 与 参 会 
交流 之 后 再 删 掉 它 们 ， 同 时 还 要 把 相同 或 相近 的 条 有 目 进 行 合并 ， 这 样 剩 下 的 条 目 丈 都 是 很 有 价值 的 想 
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I 

我 们 对 这 些 有 价值 的 条 目 进 行 排 序 ， 最 贴近 主题 的 和 最 有 友 展 空间 的 排 在 前 面 。 此 时 要 注意 ， 有 些 想 
法 表面 上 看 来 不 那么 重要 ， 但 是 稍 加 雕琢 也 许 会 变 得 非常 有 前 途 ， 它 对 当前 的 项 目 可 能 不 那么 重要 ， 也 许 
在 未 来 的 项 目 里 会 成 为 很 有 价值 的 想法 , 所 以 , 所 有 的 条 目 都 不 能 轻易 舍弃 , 要 把 它们 保存 好 。 头脑 风暴 
的 意义 并 不 完全 在 于 针对 级 待 解决 的 构思 , 它 本 身 束 是 一 种 积 祖 。 经 党 做 头脑 风暴 的 团队 普遍 思维 敏捷 ， 
头脑 中 的 想法 丰富 、 思 路 繁多 ， 这 都 是 长 期 积累 的 结果 。 

如 果 剩 下 的 条 目 依 然 很 多 ， 那 么 可 以 让 每 个 参 会 者 都 挑选 出 他 们 认为 最 理想 的 3 个 想法 ， 并 给 这 3 个 
条 目 排 序 ， 这 样 支持 率 最 高 的 条 目 残 一目 了 然 了 。 根 据 情况 ， 最 终 筛 选 出 来 的 创意 我 们 还 可 以 通过 投票 ， 
按照 少数 服从 多 数 的 原则 来 达成 最 终 的 共识 。 当 然 ， 这 个 最 终结 果 是 不 是 真正 地 符合 设计 的 最 终 需 求 ， 还 
需要 在 设计 过 程 中 反复 考验 。 所 以 ,我 们 不 必 着 急 选 出 最 终 的 结果 ,而 是 应 该 把 这 些 有 价值 的 结果 男 成 捍 图 ， 
通过 相对 直观 的 方法 对 它们 进行 规范 和 测试 。 


3.2 ”把 想法 和 思路 画 成 草图 


在 “头脑 风暴 ”结束 后 ， 我 们 得 到 了 若干 个 创意 思路 或 设计 灵感 ， 但 它们 仍然 是 一 些 抽象 的 概念 或 词 
汇 , 想 要 把 它们 变 成 比较 直观 的 设计 效果 , 我 们 需要 动手 , 在 速写 统 上 把 它们 画 成 草图 , 这 就 是 设计 的 “ 原 
型 草图 ”。 原 型 草图 的 制作 可 以 帮助 我 们 把 抽象 的 想法 具体 化 ， 对 不 完善 的 创意 进行 补充 ， 对 已 经 成 型 的 
思路 进行 扩展 和 充实 。 

我 们 的 原型 草图 是 需要 手绘 在 统 上 的 。 很 多 读者 可 能 会 出 于 对 电脑 的 依赖 以 及 受 自身 绘画 技能 的 限制 |， 
不 愿意 选择 手绘 而 希望 使 用 一 些 诸如 llustrator、Fireworks 这 样 的 绘图 软件 或 者 原型 设计 软件 来 完成 原 
型 日 图 的 制作 。 虽 然 我 们 并 不 反对 使 用 原型 设计 软件 ， 而 且 后 面 我 们 还 会 回 大 和 家 介绍 几 款 非 昔 好 用 的 原型 
设计 软件 ， 但 还 是 希望 大 家 不 要 过 于 依赖 于 这 些 软 件 而 完全 放弃 尝试 手工 绘图 。 因 为 制作 原型 草图 的 目的 
并 不 完全 是 为 了 表现 设计 的 结果 ， 而 是 进一步 激发 灵感 和 由 创意 ， 所 以 手绘 的 优势 是 无 法 替代 的 ， 它 也 是 
一 个 合格 的 设计 师 应 该 具备 的 技能 。 在 本 节 中 ， 我 们 不 但 会 告诉 大 家 手绘 的 好 处 ， 还 会 由 浅 入 深 地 为 大 家 
讲解 各 种 手绘 的 技巧 。 


3.2.1 手绘 的 原型 草图 


为 什么 一 定 要 选择 手绘 来 完成 原型 草图 的 制作 呢 ? 
掉 先 是 为 了 创意 的 需要 。 我 们 得 到 了 一 个 很 好 的 想法 ， 想 要 把 它 变 成 实 实在 在 的 设计 成 果 ， 这 个 过 
程 是 需要 多 次 的 编辑 、 测 试 和 修改 的 。 在 这 个 过 程 中 ， 曾 先是 原型 设计 的 草图 阶段 ， 之 后 是 基于 平台 规 
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泄 的 细节 设计 及 调整 ， 最 后 是 高 保 真 的 原型 成 品 。 每 一 个 步骤 的 编辑 和 修改 都 是 全 关 重 要 的 ， 而 原型 草 
图 阶段 可 以 这 是 这 些 步骤 中 最 原始 也 是 最 需要 创造 力 的 环 和 万。 人 在 原型 章 图 阶段 ， 设 计 师 必须 抓 住 主体 ， 
和 直接 表现 出 应 用 的 工作 流程 、 功 能 点 和 整体 布局 ， 不 能 把 精力 分 散在 局 部 和 细 证 上 。 玫 工 绘 图 的 特点 是 
灵活 、 快 速 、 和 直接 而 且 概 括 。 由 于 灵活 、 快 速 ， 表 现 原 型 的 过 程 可 以 跟 得 上 设计 思路 的 速度 ， 想 怎么 男 
就 怎么 画 ， 想 到 哪儿 画 到 哪儿 ， 不 会 受到 任何 的 制约 和 限制 。 但 是 电脑 软件 就 不 同 了 ， 首 先 它 无 法 直接 
表现 创意 和 想法 ， 受 到 各 种 图 形 工具 的 限制 ， 而 且 表 现 力 也 很 日 一 ， 没 法 目 如 地 表现 曲线 和 动态 ， 更 重 
要 的 是 容易 受到 各 种 软件 特有 的 图 形 样式 的 诱惑 ， 形 失 了 自主 的 表达 理念 ， 把 原型 章 图 变 得 日 调 、 雷 同 


或 者 不 伦 不 类 。 
手绘 的 另 一 个 很 重要 的 优点 就 是 “ 粗 熄 '"。 粗 烽 算 是 优点 吗 ? 对 于 绘画 艺术 的 表现 手法 来 说， 粗糙 在 


很 多 情况 下 都 是 优点 。 比 如 ， 我 们 知道 ， 有 一 种 艺术 流派 就 叫做 “表现 主义 ”[ 可 参考 挪威 画家 爱德华 ， 
蒙 克 ( Edvard Munch ) 和 俄国 画家 马克 夏 加 尔 ( Mapk waran ) 的 作品 ]， 其 中 利用 了 近乎 于 儿童 画 
的 粗略 笔法 ， 表 现 了 一 些 即 现实 又 荒诞 的 意象 ， 虽 然 看 起 来 有 些 费 解 ， 但 实际 上 最 大 限度 地 激发 了 观看 
者 的 想象 力 ， 也 使 人 们 很 容易 受到 艺术 家 情绪 和 想象 力 的 感染 而 产生 共鸣 。 原 型 草图 也 是 这 样 ， 我 们 表 
现 出 来 的 并 不 是 最 终 的 设计 结果 ， 而 是 一 个 充满 了 各 种 可 能 性 的 草图 ， 可 修改 、 可 发 展 、 可 沟通 、 可 推 
翻 ， 所 以 越 粗糙 的 草图 修改 的 余地 越 大 。 而 面 对 一 张 精 确 、 细 致 的 草图 ， 大 家 无 论 从 心理 上 还 是 感情 上 
都 不 愿意 过 多 地 修改 或 推翻 , 同时 , 由 于 先入 为 主 产生 了 已 经 成 为 既定 现实 的 心理 , 也 会 阻碍 创意 的 继续 、 
发 展 和 讨论 。 

3-6 表现 的 是 51work6 团队 开发 的 “2016 Olympics” 的 主页 设计 。 在 手绘 原型 草图 的 基础 上 ， 
设计 师 给 出 了 3 种 不 同 的 设计 样式 供 大 家 挑选 和 讨论 。 我 们 可 以 看 出 ， 虽 然 手 绘 的 原型 草图 线条 非常 简略 
而 且 模 棱 两 可 ， 但 是 为 最 终 的 设计 创意 和 表现 手法 提供 了 很 多 的 思路 和 可 能 性 。 因 此 ， 我 们 要 善于 通过 手 
绘 表现 你 的 创意 和 想法 ， 表 现 的 过 程 就 是 激发 你 的 灵感 和 继续 创意 的 过 程 。 

手绘 原型 草图 还 有 一 个 很 重要 的 优点 , 那 就 是 便于 团队 交流 、 沟 通 和 合作 。 由 于 手绘 的 草图 具有 直接 、 
简略 和 模棱两可 的 特点 ， 所 以 看 上 去 往往 是 不 完善 和 未 完成 的 ， 那 么 其 他 人 也 愿意 帮 你 完善 或 者 补充 他 们 
的 想法 ， 而 这 些 帮助 是 非常 可 贵 的 。 但 是 电脑 软件 制作 出 来 的 原型 草图 往往 受到 软件 功能 的 影响 ， 比 如 标 
尺 、 对 齐 、 圆 角 、 向 导 等 , 会 不 自然 地 陷入 到 对 细节 的 完善 和 把 握 中 , 最 终 完成 的 结果 很 可 能 已 经 很 具体 了 ， 
别人 看 到 了 这 样 的 结果 ， 会 认为 你 的 设计 已 经 快要 完成 ， 往 往 就 不 愿意 再 提出 修改 意见 或 者 不 愿意 有 重大 
的 改变 。 

既然 我 们 一 定 要 选择 手绘 来 完成 原型 草图 的 设计 ， 那 么 我 们 应 该 如 何 下 手 呢 ? 画 的 时 候 要 注意 些 什么 
呢 ? 下 面 我 们 和 大 家 谈 一 谈 手 绘 草图 的 经 验 和 技巧 ， 以 及 需要 注意 的 要 点 。 
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图 3-6 51work6 开发 的 “2016 Olympics” 项 目的 3 款 主页 设计 


3.2.2 ”党 早 但 要 认真 


了 解 了 手绘 原型 草图 的 特性 和 优点 后 ， 我 们 更 应 该 自信 了 ， 因 为 我 们 绘制 的 并 不 是 艺术 作品 ， 既 不 考 
验 你 的 绘画 水 平 ， 也 不 要 求 你 有 绘画 功底 ， 幼 稚 和 粗糙 在 肤 泽 情 况 下 反而 成 为 了 优点 。 唯 一 的 要 求 瓯 是 能 
够 快速 和 概括 地 表现 出 你 的 想法 。 当 然 ， 单 单 这 一 点 要 求 也 很 不 容易 满足 。 所 以 ， 我 们 建议 大 家 在 条 件 允 
许 的 情况 下 ， 了 解 一 些 绘画 的 基本 常识 ， 擎 握 一 些 绘画 的 基本 技 15， 这 样 我 们 的 章 图 才 会 更 具 表 现 力 和 专 
业 性 。 总 的 来 说 ， 我 们 需要 保持 的 状态 就 是 “党 草 但 要 认真 ， 既 不 能 完全 放 开 手笔 在 纸 上 糊 涂 乱 摸 ， 也 
不 能 谣 小 慎 微 地 在 纸 上 精 雕 细 刻 。 接 下 来 ,我 们 运用 几 个 方面 的 经 验 , 让 大 家 逐步 车 握手 绘 昔 图 的 绘制 技巧 。 

1. 用 最 简单 的 工具 

在 表现 头脑 中 的 创 量 和 想法 时 ， 我 们 一 定 要 选择 最 快 、 最 直接 的 方法 ， 不 要 想 看 把 画面 绘制 得 多 么 完 
美和 丰富 ,一般 情况 下 也 不 用 着 色 , 更 不 能 受到 工具 的 限制 。 所 以 ,我们 要 选择 使 用 最 简单 的 工具 :铅笔 《有 目 
动 的 最 好 入 没有 格 的 纸张 〈 最 好 是 速写 本 入 签字 笔 或 圆珠笔 。 一 般 情 况 下 ， 这 些 融 足够 了 。 诸 如 三 角 板 、 
屁 形 尺 和 曲线 板书 类 的 工具 我 们 不 推荐 使 用 ， 有 的 人 担心 目 己 的 线条 画 得 不 够 熏 ， 曲 线 画 得 不 够 流畅 ， 硕 
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望 借助 上 述 工 具 来 完善 目 己 的 草图 ， 但 结果 依然 是 被 这 些 工具 约束 了 想象 力 而 无 法 自由、 快速 地 表达 。 所 
以 干 万 不 要 害怕 目 己 的 线条 男 得 不 够 直 或 流畅 ， 多 男 一 些 ， 目 然 殉 丈 能 生 I 了 。 

如 果 章 图 需要 修改 ， 最 好 也 不 要 使 用 橡皮 ， 更 不 能 使 用 涂改 液 ， 因 为 我 们 的 观点 是 : 把 所 有 的 错误 留 
在 纸 面 上 。 在 记录 思维 和 想法 的 时 人 息 ， 所 有 的 否定 和 修改 实际 上 都 是 思维 的 过 程 ， 现 在 完 得 不 完美 ， 也 许 
将 来 会 完 得 更 适合 ， 所 以 尽量 不 要 把 认为 销 误 的 线条 擦 挥 。 我 们 的 万 法 是 : 先 用 铅笔 快速 绘图 ， 再 用 签字 
笔 或 圆珠笔 进行 二 次 描绘， 这 样 既 可 以 把 原来 错误 的 地 方 改 过 来 ， 还 可 以 对 原来 侣 混 的 地 方 加 以 衣 定 ， 而 
签字 笔 的 墨 线 要 比 铅笔 深 得 多 ( 最 好 选用 比较 淡 的 铅笔 ,如 2H 或 HB )， 所 以 从 视 竞 上 融会 以 签字 笔 的 墨 
线 为 主 ， 只 有 仔细 看 才 可 以 看 到 铅笔 线 ， 示 例 图 如 图 3-7 所 示 。 如 果 一 定 要 把 铅笔 线 去 挥 ， 我 们 推荐 大 家 
选用 可 塑 橡皮 来 擦 除 ， 因 为 它 的 特点 是 无 法 把 铅笔 线 彻 拘 擦 除 干净 ， 而 且 可 塑 的 特性 可 以 帮助 我 们 选择 性 
地 进行 探 除 ， 这 样 探 除 的 过 程 也 成 为 了 表现 和 创作 的 过 程 ， 一 举 两 得 。 
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图 3-7 51work6 开 太 的 “价格 线 ” 应 用 原型 草图 的 铅笔 稿 、 墨 稿 及 最 终 设 计 稿 


绘制 草图 的 时 候 一 定 不 要 害怕 辆 错 或 者 失败 ， 不 要 奢望 一 次 成 功 ， 多 辆 几 张 ， 思 会 得 到 完美 的 结果 。 
此 外 ， 也 不 要 嫌 男 面 凌 乱 。 前 面 我 们 前 述 过 ， 凌 乱 而 模棱两可 的 线条 更 有 助 于 我 们 友 挥 想象 力 、 交 流 和 下 
创意 。 

2. 虚 买 、 阴 影 和 动态 

为 了 增强 手绘 草图 的 表现 力 ， 我 们 要 善于 变换 不 同 的 表现 手法 ， 使 画面 更 加 活跃 而 充满 内 涵 。 因 此 ， 
使 用 蛙 一 而 均匀 的 线条 来 表现 是 不 可 取 的 ， 我 们 要 用 铅笔 在 画面 上 表现 出 虚实 、 空 间 和 动态 来 ， 这 听 上 去 
似乎 有 些 难度 ， 但 是 尝试 一 下 ， 你 会 友 现 也 许 并 没有 想象 中 那么 复杂 。 

首先 是 表现 画面 中 的 “虚实 。 我 们 在 摘 画 图 形 和 事物 的 时 候 , 根据 创意 的 需要 , 有 时 需要 精确 、 肯定 ， 
有 时 要 模糊 、 含 昆 ， 这 残 需 要 在 用 笔 的 时 候 有 所 区 别 ， 勾 画 的 时 候 ， 融 要 有 实 线 、 有 虚线 、 有 深 线 〈 签字 
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笔 的 墨 线 )、 有 浅 线 ( 铅笔 线 ), 使 它们 各 尽 其 用 ,相得益彰 。 需 要 注意 的 是 ， 在 表现 转角 和 连接 点 的 时 候 ， 
要 用 心 处 理 并 在 细节 上 加 以 区 分 ( 示例 图 如 图 3-8 所 示 )。 如 果 想 法 明确 和 肯定 ， 要 使 线条 交叉 ， 这 样 的 
处 理 看 上 去 很 结实 ， 也 很 精确 ; 如 果 思 维 侣 混 或 还 在 犹 驰 ， 要 使 线条 断 开 ， 这 样 给 今后 的 补 序 、 修 改 和 讨 
论 留 有 空间 ， 别 人 看 上 去 也 会 有 希望 帮 你 修改 元 善 的 欲望 。 如 果 把 所 有 的 线条 精准 地 结合 在 一 起 ， 表 面 上 
很 工整 ， 其 实 是 不 可 取 的 ， 既 没有 表现 力 ， 也 未 失 了 继续 思考 的 余地 。 


3-8 人 : 1 es 

左 图 使 用 了 交叉 线 的 处 理 ， 看 上 去 ( 
更 精确 ; 右 图 把 线条 断 开 ， 为 继续 | el ， 
思考 留 有 余地 ;中 图 把 所 有 的 线条 

封 死 的 做 法 不 可 取 N 


同时 ， 我 们 还 要 设法 把 物体 、 控 件 及 图 标的 空间 和 体积 感 表现 出 来 ， 这 对 生 有 素 摘 经 验 的 设计 者 来 这 
并 不 是 一 件 难 事 。 当 然 ， 我 们 这 里 没有 足够 的 篇 幅 来 帮助 大 家 了 解 诸如 透视 法 则 、 光 影 体积 的 相 天 知识 ， 
而 且 得 到 这 上 毕 知 识 的 途径 也 有 很 多 。 在 这 里 ， 我 们 主要 谈 谈 摘 绘 原型 草图 的 时 候 ， 如 何 表 现 事 物 的 体积 感 
和 空间 感 。 首 先是 对 体积 的 表现 干 万 不 要 过 量 , 轻 摘 淡 写 , 点 到 为 止 束 行 了 。 同 时 , 要 选择 合适 的 表现 万 法 ， 
可 以 根据 设计 师 的 风格 和 习惯 ,比如 用 铅笔 随意 地 涂抹 少量 的 阴影 ， 沿 着 造 型 的 右 、 下 边 义 画 双 线 ， 使 用 
淡 灰 色 的 马克 笔 等 。 当 然 ， 最 好 可 以 把 上 述 的 这 些 技巧 结合 起 来 使 用 ， 示 例 图 如 图 3-9 所 示 。 


3-9 
用 铅笔 或 马克 笔 表 现 体积 感 


最 后 ， 我 们 要 把 交互 和 旋转 的 动态 表现 出 来 ， 这 主要 通过 重 亚 和 各 种 箭头 来 实现 。 重 到 区 是 表现 物体 
运动 过 程 的 重 如 如 图 3-10 所 示 )。 箭头 的 使 用 融 比 较 广 了 , 既 可 以 表现 物体 运动 的 方 品 如 图 3-11 所 示 )， 
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也 可 以 表现 不 同 界面 间 的 交互 关系 〈《 如 图 3-12 所 示 )， 还 可 以 表现 导航 、 进 度 和 弹出 等 。 


图 3-10 
表现 运动 过 程 的 重 影 和 方向 


图 3-11 
用 箭头 表现 运动 方 回 


第 3 章 ， 讨 论 与 初步 设计 一 完成 原型 的 草图 设计 


图 3-12 表现 界面 的 交互 关系 


3. 把 声音 和 振动 也 画 出 来 
手绘 原型 日 图 的 表现 力 是 无 穷 的 ， 除 了 上 述 这 些 有 形 和 具象 的 事物 ， 有 时 我 们 还 可 以 根据 需要 勾画 出 
一 些 无 形 和 抽象 的 事物 ， 比 如 闪 烧 、 声 音 和 振动 ( 示例 图 如 图 3-13 所 示 )。 


图 3-13 

指示 灯 报 警 时 的 3 种 状态 ， 
从 左 至 右 依 次 是 : 闪烁 、 
声音 和 振动 


3.2.3 ”原型 工具 和 原型 设计 软件 


用 手绘 的 万 式 完 成 原型 草图 设计 的 优势 固然 明显 ， 但 是 仍然 有 很 大 一 部 分 开 友 者 或 是 程序 员 认 为 自己 
不 具备 手绘 的 能 力 ， 既 没有 接受 过 绘图 的 训练 ， 也 不 具备 绘画 的 天 分 。 有 没有 办 法 能 够 避 开 绘画 技能 的 限 
制 或 手工 绘图 的 困难 而 实现 原型 草图 的 设计 呢 ? 在 这 一 万 里 ， 我 们 将 为 大 家 介绍 一 些 很 有 效 的 工具 。 

1. 原型 设计 模板 

由 Suki Kits 公司 生产 的 原型 设计 模板 套 六 是 一 个 比较 好 的 选择 ( 如 图 3-14 所 示 )。 根 据 不 同 的 应 用 
平台 ， 他 们 生产 了 不 同 的 产品 套 沪 ， 包 括 了 iOS 平台 的 iPhone 和 iPad、Android 平台 的 各 个 版 本 以 及 
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Windows Phone 平台 的 产品 。 模 板 由 不 锈 钢 制 成 ， 精 度 很 高 ， 上 面包 括 了 各 应 用 平台 的 状态 栏 、 标 签 柱 
和 确认 按钮 等 几乎 所 有 基本 控件 样式 ， 且 完全 符合 造型 
的 刻度 。 


规 学 和 大 小 规格 ， 边 缘 还 市 有 以 像素 〈 px ) 为 单位 


ee 


. 


| 
me 


| 
< 
> 
ar 
二 - 
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3-14 


Suki Kits 公司 生产 的 原型 设计 模板 套 沪 


此 外 ， 套 洲 里 还 配 有 印 着 手机 或 平板 电脑 图 形 的 设计 绘图 纸 ( 如 图 3-15 所 示 )， 其 规格 与 模板 一 致 ， 


便于 使 用 者 用 模板 直接 人 在 相应 的 产品 图 形 里 设计 、 勾 男 。 使 用 模板 套 妆 最 大 的 优点 残 是 可 以 准确 地 画 出 应 
用 的 真实 大 小 ， 有 助 于 进一步 的 细节 推 融 ， 也 确实 能 达到 快速 、 


青 确 和 标准 的 效果 ; 但 是 局 限 性 有 点 大 ， 
毕竟 模板 的 内 容 是 有 限 的 ， 而 且 容 易 棕 铀 想象 力 。 


3=15 
原型 设计 模板 套 凌 里 的 设计 绘图 纸 


第 3 章 讨论 与 初步 设计 一 完成 原型 的 草图 设计 


2. 几 款 原型 草图 设计 软件 

前 面 我 们 曾经 提 到 ， 完 全 放弃 手工 绘图 并 不 是 不 可 能 的 。 我 们 熟知 的 图 形 设计 软件 (lllustrator、 
Photoshop、Fireworks 和 Visio 等 ) 都 可 以 满足 原型 草图 的 设计 要 求 ， 只 是 这 些 软件 体积 庞大 、 功 能 繁 
多 、 包 罗 万 象 , 使 用 起 来 无 法 达到 快速 、 自 如 的 目的 。 当 然 , 我 们 可 以 下 载 一 些 成 型 的 原型 设计 模板 来 实现 ， 
这 也 是 非常 方便 的 。 

下 面 我 们 要 为 大 家 介绍 的 两 款 软 件 是 专 为 用 户 体验 原型 草图 设计 量 身 定做 的 电脑 软件 , 不 但 使 用 方便 、 
快捷 ， 而 且 效 果 亲 和 、 自 然 ， 可 以 帮 有 我 们 避 开 手工 绘制 的 烦恼 而 完全 使 用 电脑 来 完成 原型 草图 的 绘制 。 首 
先是 美国 Balsamig 公司 的 Balsamiq Mockups《〈 如 图 3-16 所 示 )， 这 款 软 件 的 操作 非常 灵活 ， 而 且 成 
型 的 图 块 采用 手绘 风格 ， 制 作出 来 的 效果 厚重 而 自然 。 我 们 可 以 下 载 不 同 应 用 平台 的 原型 图 形 插件 来 完成 
相应 的 设计 。 


本 全 全 Balsamig Mockups For Desktop = * Now Mackap 
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图 3-16 Balsamiq 公司 的 Balsamiq Mockups 


另 一 款 软 件 是 The Omni Group 公司 的 OmniGraffle ( 如 图 3-17 所 示 )。 虽 然 它 是 一 款 在 苹果 电脑 
上 运行 的 、 针 对 iOS 平台 应 用 的 原型 设计 软件 ， 但 是 如 今 也 加 入 了 Android 和 Windows Phone 平台 的 
原型 图 形 插件 ， 功 能 强大 ， 效 果 精 美 、 清 新 ， 可 以 同时 针对 原型 草图 和 中 保 真 原型 进行 设计 和 构思 。 
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图 3-17 The Omni Group 公司 的 OmniGraffle 


上 述 工 具 既 可 以 帮助 你 避 开 手绘 的 困扰 ， 也 可 以 为 你 弥补 绘图 缺陷 ， 同 时 为 原型 日 图 设计 提供 了 更 多 
的 选择 和 风格 。 我 们 建议 把 这 些 工 具 和 软件 与 手工 的 章 图 相互 补充 ， 既 不 完全 放弃 手绘 ， 又 不 受 手绘 反 能 
的 限制 ， 目 标 是 尽快 把 目 己 的 想法 呈现 在 纸 面 上 。 近 试 了 我 们 分 享 给 大 家 的 经 验 ， 相 信 大 舟 已 经 能 够 把 目 
己 的 创意 和 思路 绘制 出 来 ， 变 成 一 张 张 的 捍 图 。 下 一 步 束 是 整理 好 草图 的 顺序 ， 把 它们 关联 起 来 进行 初步 
的 浏 贞 和 检测 。 


3.3 ”检验 和 分 享 你 的 思考 结果 


原型 草图 的 产生 是 整个 移动 应 用 用 尸体 验 设计 公关 重要 的 一 步 ， 它 标记 着 创意 、 构 思 阶 段 基本 完成 ， 
即将 进入 设计 的 布局 和 调整 阶段 。 那 么 在 这 关键 的 上 时刻， 我 们 要 充 下 心 来 调整 思绪 ， 用 心 整理 一 下 我 们 的 
构思 ， 看 看 它 有 没有 继续 完善 和 修改 的 空间 。 有 具体 的 做 法 是 ， 把 所 有 的 量 图 按照 我 们 创 晶 和 设计 的 思路 串 
起 来 ， 构 成 流程 图 。 每 一 个 设计 师 都 有 目 己 独特 的 一 套 开 友 流程 ， 和 而 无 论 什么 样 的 流程 和 万 法 ， 都 要 从 原 
型 提 图 的 纸 面 排列 上 开始 , 残 像 导演 在 电影 开始 担 报 之 前 , 先 要 把 剧本 内 容 画 成 分 镜头 的 故事 板 一 样 。 因 此 ， 
我 们 要 为 下 一 步 的 设计 工作 做 好 准备 ， 必 须要 认真 做 好 应 用 程序 的 故事 板 。 
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3.3.1 有 连贯 ， 有 情节 ， 画 出 应 用 的 故事 概 


故事 板 ， 一 般 是 所 电影 或 者 动画 在 开拍 或 绘制 之 前 ， 先 把 所 有 的 情节 分 成 不 同 的 场景 ， 再 把 场景 的 每 
一 个 镜头 画面 像 连环 画 或 者 漫画 一 样 快速 绘制 在 日 称 纸 上 ， 并 标注 出 镜头 的 运动 方式 、 时 间 长 度 、 对 昌 和 
寺 效 等 ， 以 此 来 检验 故事 的 衔接 是 否 连 贯 、 合 理 ， 以 便 对 整个 担 报 过程 建 立 起 完整 的 视 完 概念 ， 示 例 图 如 
3-18 所 示 。 应 用 程序 运行 和 使 用 的 过 程 也 是 一 个 充满 了 场景 变换 和 情节 的 过 程 ,同样 需要 检验 和 修 1J。 
所 以 ， 在 开始 下 一 步 细 世 设 计 之 前 ， 我 们 要 把 原型 草图 整理 好 ， 坦 漏 补 缺 ， 把 所 有 的 春 面 串 在 一 起 ， 并 且 
每 一 项 功能 的 每 一 个 动作 都 不 要 漏 掉 ， 真 正 做 到 前 有 因 、 后 有 果 、 中 间 的 过 程 有 条 理 。 


ACTION DIALOGUE TIME 


图 3-18 
广告 短片 的 分 镜头 故事 板 
(图 片 由 李 兰 兰 创作 并 提供 ) 
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3-19 表现 的 是 51work6 团队 开发 的 “2016 Olympics ”项 目的 原型 流程 草图 。 设 计 团队 把 应 用 
程序 运行 中 的 每 一 个 界面 都 贺 在 了 同一 张 图 统 上 ,以便 大 家 讨论 、 修 改 和 下 一 步 的 相互 协作 。 有 了 这 张 图 纸 ， 
团队 的 每 一 个 人 都 会 对 这 个 项 目 有 清晰 完整 的 认识 ， 同 时 ， 也 保持 了 相同 的 基本 愿景 ， 为 之 后 的 工作 铺 平 
了 着 路 。 


3-19 51work6 团队 开发 的 “2016 Olympics” 项 目的 原型 流程 草图 


这 样 一 来 ， 我 们 的 应 用 在 结构 、 流 程 和 运行 逃 辑 上 束 基 本 上 不 会 出 现 错 误 了 。 当 然 ， 我 们 还 可 以 通 
其 他 万 法 进一步 去 把 握 和 体验 应 用 程序 的 设计 和 创 总 是 否 合 理 。 


3.3.2 ”利用 原型 草图 进行 可 用 性 测试 


最 简单 的 方法 , 惑 是 利用 移动 设备 的 拍照 和 图 片 浏览 功能 ( 如 图 3-20 所 示 )。 我 们 在 第 1 章 中 提 到 过 ， 
对 应 用 设计 进行 可 用 性 测试 是 非 党 重要 的 步骤 。 这 个 步骤 不 单单 是 针对 设计 的 中 保 真 阶段 ， 在 草图 阶段 我 
们 丈 可 以 对 应 用 进行 简单 的 可 用 性 测试 。 我 们 可 以 把 原型 草图 中 的 每 一 个 界面 单独 担 照 ， 之 后 使 用 照片 美 
化 应 用 对 照 卢 稍 加 调整 ， 主 要 是 把 4 个 边缘 裁 切 整齐 并 调整 一 下 亮度 和 和 对比度 ， 使 图 片 清 晰 、 完 整 。 之 后 
就 可 以 在 图 片 浏览 器 里 的 全 屏 模 式 下 一 张 一 张 地 翻 看 图 片 ， 这 样 是 不 是 能 于 加 直观 地 体验 应 用 程序 运行 的 
流程 呢 ? 
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3-20 
利用 移动 设备 的 拍照 
和 图 片 浏览 功能 


由 于 直接 拍照 容易 受到 光线 、 角 度 和 镜头 硬件 的 限制 ， 担 出 来 的 照片 往 往 有 尝 不 尽 人 章 ， 比 如 不 清晰 
或 者 变形 ， 因 此 ， 我 们 还 可 以 把 纸张 上 的 草图 利用 扫 换 仪 输入 电脑 ， 在 Photoshop 里 稍 加 修饰 和 裁剪 ， 
编 好 顺序 后 存放 在 文件 夹 里 ， 然 后 同步 到 移动 设备 里 用 图 片 浏览 功能 翻 看 浏览 。 

如 果 名 得 还 不 满足 ， 我 们 还 可 以 尝试 利用 草图 的 扫 搬 文件 做 一 个 简易 的 、 可 进行 页 面 跳 转 的 Flash 动 
画 来 体验 一 下 大 致 的 功能 、 导 航 和 布局 结构 。 如 果 你 具备 编程 能 力 或 者 你 团队 里 的 程序 员 愿 意 帮 你 ， 融 可 
以 把 这 个 测试 文件 实现 得 更 加 完美 。 程 序 没 必要 太 复杂 ， 束 像 你 的 草图 一 样 粗粮 即 可 ， 图 片 和 文本 占 位 可 
以 一 律 用 假 信息 ， 只 要 能 扎 击 按钮 简单 翻 动 残 足 够 了 ， 目 的 是 检验 你 的 布局 是 人 否 合 理 ， 控 件 是 人 否 规 ， 导 
航 是 人 否 正确 。 


3.3.3” 几 种 其 他 类 型 的 草图 


原型 捍 图 是 表现 应 用 设计 交互 、 控 件 和 导航 万 陈 等 运行 状态 的 捍 图 形式 。 除 了 原型 章 图 外 ， 还 有 其 他 
几 种 与 移动 应 用 用 户 体 验 设计 相关 的 草图 形式 ， 昌 然 它 们 没有 原型 草图 实用 ， 但 在 一 些 特殊 情形 或 者 场合 
下 还 是 非常 有 帮助 的 。 下 面 我们 同 大 家 介绍 几 种 比较 实用 的 草图 形式 。 

。 功能 概念 草图 。 这 种 草图 不 需要 对 界面 的 细节 和 布局 设计 进行 详细 的 摘 绘 ， 只 针对 功能 的 特点 和 
功能 所 达到 的 效果 进行 图 解 ， 大 多 表现 功能 运行 时 产生 的 动作 、 规 律 和 状态 。 图 3-21 表现 的 是 
51work6 团队 研 友 的 一 款 面向 学 龄 前 儿童 配色 涂鸦 的 游戏 应 用 “SaPaint 的 功能 概念 示意 草图 ， 
其 中 运用 稍 头 加 文字 的 方法 表现 了 弹出 和 收回 的 动画 效果 。 
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。 使 用 情景 草图 。 这 种 草图 一 般 用 漫画 的 形式 ， 表 现 使 用 者 使 用 应 用 程序 时 的 情景 ， 以 此 来 分 析 用 
尸 的 需求 和 功能 点 的 设置 。 它 适合 在 会 议 上 或 者 与 用 户 沟 通 的 时 候 展 示 ， 既 展现 了 应 用 的 优点 ， 
叉 有 利于 在 团队 内 部 达成 共识 。 情 太一 般 不 宜 太 复杂 ， 最 好 能 在 4 幅 图 内 把 事情 说 清楚 。 图 3-22 
是 51work6 团队 对 他 们 的 应 用 “价格 线 ”进行 用 户 需求 分 析 时 设计 的 使 用 情景 草图 ， 关 键 是 要 创 
造 一 个 既 典 型 又 合适 的 漫画 形象 ， 同 时 要 准确 地 表现 情形 和 环境 。 


图 3-22 51work6 团队 为 “价格 线 ” 项 目 设计 的 使 用 情景 草图 
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。 应 用 方式 图 解 。 这 种 草图 有 点 像 应 用 的 说 明 书 ， 对 应 用 的 使 用 万 法 〈 包 括 细节 操作 ) 进行 图 解 ， 
包括 使 用 应 用 程序 时 的 触 近 手 势 ， 如 何 应 对 应 用 程序 做 出 的 反应 以 及 如 何 对 应 用 进行 合理 的 设置 
等 ， 如 图 3-10 所 示 和 图 3-11 所 示 。 
当然 ， 应 用 设计 的 草图 形式 绝 不 仅仅 这 几 种 ， 应 该 说 数不胜数 ， 而 大 多 取决 于 设计 师 对 应 用 的 设计 目 
标 和 和 要求， 以 及 目 身 对 事物 的 表现 能 力 和 想象 力 。 


针对 “ 亏 术 品 收藏 ”应 用 的 用 户 体 验 设 计 ， 我 们 也 把 目 己 的 创 晤 和 设想 田 成 了 原型 草图 ， 在 这 
里 和 大 家 分 享 一 下 。 这 里 主要 是 为 这 一 部 分 内 容 和 概念 在 案例 上 进行 宁 充 和 落地 ， 具 体 如 图 3-23 和 
8 240 


人 体 ; bp 5 到 


图 3-23 “艺术 品 收藏 ”应 用 的 用 户 体验 设计 主页 面 的 原型 草图 
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图 3-24 
艺术 品 收藏 ”应 用 的 
用 户 体验 设计 作品 陈 
列 界面 的 原型 草图 


我 们 大 体 的 设想 是 ， 企 主页 面 上 把 应 用 内 容 的 儿 个 六 的 分 类 设计 把 立体 标 等 鸭 形式 。 为 了 增强 父 
互 体 验 ， 我 们 把 可 点 击 的 区 域 安排 在 客 面 的 两 人 则 ， 这 桂 比 较 适 合 拇 指 的 点 击 和 和 划 屏 。 在 下 一 草 里 ,我 
们 会 为 大 家 详细 前 述 交 互 体验 中 移动 设备 己 人 体 之 间 的 天 系 。 同 时 ， 为 了 提高 仙 移 上 的 吸引 力 ， 我 们 
把 标 等 设计 得 比较 六 ， 了 这样 可 以 利用 也 术 作品 本 有 身 的 魅力 增强 寞 面 的 吸引 力 。 

凡是 对 忆 术 品 感 兴 趣 罗 人， 都 应 该 对 图 大 、 美 术 饱 和 博物 饱 罗 入围 感到 杀 切 和 认同 ， 因 此 我 们 决 
定 把 寞 面 设 计 扎 国 克 陈 列 的 负 况 效 宁 。 这 桩 的 安 排 也 与 iOS 分 屏 取 的 平 铺 导 航 相 同 ， 只 要 进入 页 面 ， 
大 家 融会 很 目 然 地 和 互 石 划 屏 雄 员 之 术 作 品 ， 残 好像 漫步 住 国 感 里 一 梓 。 

不 过 对 填 每 由 作品 的 操作 和 说明， 我 们 允 没 有 一 个 非常 确定 的 设计 ， 使 用 特定 按钮 来 激活 标 等 的 
做 法 比较 向 约 和 有 时 观 , 而 且 可 以 把 个 常用 的 按钮 藏 起 来 , 使 国 面 更 加 简 活 和 纯粹 。 同 时 , 为 了 但 找 亡 使 ， 
我 们 设计 了 系 引 | 页面 ， 华 任何 情况 下 都 可 以 通过 石 下 角 的 按钮 激活 并 返回 。 当 然 了 ， 这 个 大 体 的 设想 
缺 之 细 和 万， 下 一 步 我 硕 要 通过 侍 电 脑 上 制作 中 保 真 鸭 原 型 来 完善 我 们 的 设计 。 


草图 制作 得 再 细致 、 再 丰 曙 也 只 是 捍 图 ， 它 只 能 概括 地 表现 出 你 的 创 有 晶 想 法 和 运行 思路 ， 真 正 进入 到 
导航 万 式 、 探 件 设 置 和 界面 样式 等 细节 的 原型 设计 时 ， 残 不 是 那么 随意 和 概括 了 ， 需 要 注意 很 多 的 规范 ， 
会 遇 到 很 多 的 问题 。 因 此 ， 我 们 必须 对 移动 应 用 的 设计 规则 、 要 求 和 特点 有 全 面 的 认识 。 在 接 下 来 的 内 
容 里 ， 我 们 将 为 大 家 曾 述 各 个 平台 在 交互 万 式 、 布 局 结构 以 及 导航 万 式 和 空间 安排 上 的 规范 和 要 求 ， 这 是 
成 为 专业 、 成 敦 的 用 尸体 验 设 计 师 的 必 经 之 路 。 
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虽然 我 们 已 经 对 移动 应 用 用 户 体验 设计 的 流程 、 市 场 定 位 、 用 户 分 析 以 及 创意 万 法 有 所 了 解 ， 但 是 当 
我 们 拿 起 铅笔 或 是 坐 在 电脑 前 准备 为 你 的 移动 应 用 进行 原型 设计 的 时 候 ， 会 友 现 依然 还 有 很 多 问题 摆 人 在 我 
们 面前 ， 叹 待 解决 。 比 如 ， 我 们 的 设计 针对 的 是 哪个 移动 平台 ? 在 什么 样 的 设备 上 运行 ? 选择 哪 种 导航 万 
陈 ” 图 形 文件 应 该 设置 多 大 的 像素 ? …… 

所 以 ， 先 不 要 急 看 把 你 的 奇 思 妙 想 付 诸 实 施 ， 这 是 一 个 漫长 的 需要 非常 严谨 、 反 复 推 襄 的 过 程 。 在 接 
下 来 的 几 章 里 , 我 们 将 告诉 大 家 如 何 按部就班 、 有 条 不 亲 地 把 我 们 的 应 用 设计 成 一 个 能 够 达到 专业 水 准 的 、 
符合 用 尸 和 市 场 要 求 的 、 可 实施 编程 的 高 保 真 原型 。 而 在 本 草 里 ， 我 们 将 从 最 基本 的 移动 设备 以 及 移动 应 
用 的 交互 特点 开始 ， 由 浅 入 深 地 逐步 帮助 大 家 成 为 拥有 创新 意识 和 专业 理念 的 设计 师 。 


4.1 了 解 移动 设备 


由 于 我 们 的 工作 针对 的 是 移动 设备 ， 所 以 能 够 友 挥 和 展现 目 己 才华 的 舞台 不 可 能 会 很 大 。 可 以 况 ， 
我 们 的 工作 丈 是 在 巴掌 大 小 的 一 块 触 措 屏 上 反 反 复 复 地 纠结 着 。 也 正 因 如 此 ， 我 们 的 设计 难度 比 其 他 门 
类 的 设计 以 及 传统 的 网 页 、UI 设计 要 大 得 多 。 移动 设备 的 特殊 性 给 我 们 的 设计 工作 市 来 了 各 种 各 样 的 限 
制 ， 而 且 三 大 平台 也 各 目 存 在 着 自己 的 硬件 特点 ， 因 此 我 们 不 得 不 在 设计 过 程 中 反复 其 酌 、 测 试 、 修 改 
和 推 融 。 

由 此 可 见 ， 在 进入 制作 阶段 的 第 一 步 ， 我 们 束 是 要 全 面 了 解 一 下 三 大 平台 移动 设备 的 种 类 、 特 点 、 规 
格 和 差 寞 。 
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4.1.1 移动 设备 的 种 类 


我 们 的 设计 主要 是 针对 新 型 的 智能 移动 通信 设备 。 通 俗 地 襄 ， 融 是 大 家 所 玖 和 的 采用 触 操 屏 技 术 的 斩 
能 手机 和 平板 电脑 。 因 此 ， 旧 了 式 的 采用 物理 按键 或 手写 笔 操 作 的 怕 能 手机 产品 不 在 我 们 介绍 的 沁 围 内 。 同 
时 ， 新 型 的 智能 移动 设备 还 需要 具备 相应 的 硬件 配置 和 功能 ， 必 须 具备 Wi-Fi 无 线 网 络 功能 、 内 部 存储 功 
能 、 蛙 点 或 多 扣 触 控 屏 副 、 声 瘟 播 放 器 、 麦 殉 风 、 和 耳机 揪 口 以 及 数据 传输 功能 。 而 普遍 的 移动 设备 一 般 还 
县 备 摄像 头 〈 包括 前 置 摄 像 头 )、 闪 光 灯 、GPS 卫星 定位 、 蓝 牙 、 重 力 感应 功能 、 光 线 传感器 、 距 离 感应 
功能 以 及 电子 罗盘 等 。 这 些 硬件 上 的 功能 对 于 应 用 开 友 公关 重要 ， 因 此 ， 我 们 应 该 对 它们 有 一 定 的 了 解 。 

忌 的 来 说 ， 我 们 把 智能 移动 设备 分 为 两 大 类 一 一 手机 和 平板 电脑 ( 如 图 4-1 所 示 )， 它 们 的 差别 主要 
在 于 是 谷 有 具备 通话 功能 和 屏 罕 大 小 上 。 里 然 目前 通话 依然 是 手机 最 主要 的 功能 ， 但 是 随 着 移动 应 用 的 丰 襄 
和 不 断 友 展 更 著 ， 各 种 交流 和 通话 方式 渐渐 地 使 手机 多 元 化 ， 通 话 质量 已 经 不 再 作为 人 们 选择 手机 产品 的 
主要 依据 ， 而 功能 是 舍 并 全、 能 舍 兼 容 更 多 的 移动 应 用 程序 成 为 了 手机 产品 的 主要 卖点 。 


4-1 手机 与 平板 电脑 


平板 电脑 束 是 为 了 使 用 各 种 移动 应 用 程序 而 衍生 出 来 的 ， 其 特点 是 屏 菇 较 大 ， 一 般 都 采用 多 扣 触 挥 ， 
所 以 操 探 灵活， 更 适合 工作 、 娱 乐 和 学 习 ， 缺 点 是 没有 手机 携 市 起 来 方便 ， 因 此 在 普通 平板 电脑 的 基础 上 
还 衍生 出 来 很 多 种 小 型 的 平板 电脑 。 而 有 尝 手机 广 商 为 了 弥补 手机 屏 规 较 小 的 缺点 ， 也 设计 并 生产 了 多 种 
超大 屏 规 的 手机 ， 因 此 现在 我 们 单单 从 外 形 上 经 单 难 以 区 分 它们 。 
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4.1.2 移动 设备 的 规格 和 像素 尺寸 


手机 的 大 小 规格 相对 固定 ， 一 般 来 说 是 按照 手 区 的 抓 握 效 果 而 设计 制定 的 。 而 平板 电脑 因为 不 受 单 手 
操作 的 限制 ， 所 以 一 般 设 计 成 书本 的 大 小 〈 普通 平板 电脑 一 般 为 16 开 杂 志 的 大 小 ， 而 小 型 平板 电脑 一 般 
设计 成 32 开 书 本 的 大 小 )。 天 于 移动 设备 的 规格 尺寸 ,我们 无 需 过 多 的 了 解 。 对 于 用 户 体验 设计 工作 来 说 ， 
我 们 关心 的 主要 是 移动 设备 屏 芭 的 像素 尺寸 。 因 为 这 个 尺寸 的 大 小 直接 关系 到 图 形 、 特 效 以 及 文字 的 大 小 
比例 关系 。 

那么 ， 我 们 先 来 看 看 运行 ijDS 系统 的 设备 ( 也 融 是 羊 果 公 司 的 移动 设备 ) 的 屏幕 像素 尺寸 ( 如 图 
4-2 所 示 )。 因 为 相 比 其 他 平台 来 说 ，iOS 平台 的 产品 比较 规范 、 一 致 ， 给 设计 工作 市 来 了 很 多 方便 。 


xdgp0Z 


xdyZ0 


xd955 


iPhone 4s iPhone 5 iPad mini iPad 4 


4-2 iOS 平台 移动 设备 的 像素 尺寸 


通过 图 4-2 我 们 看 到 4 款 比 较 有 代表 性 的 iOS 平台 移动 设备 的 像素 尺寸 。iPhone 与 iPod touch 前 
期 产品 的 屏幕 像素 尺寸 是 960 x 640 像素 ，iPhone 5 与 新 一 代 iPod touch 是 1136 x 640 像素 ，iPad 
mini 是 1024 x 768 像素 ，iPad 是 2048 x 1536 像素 。 这 些 尺 十 是 我 们 在 之 后 进行 界面 设计 与 制作 时 ， 
在 绘图 软件 中 生成 图 像 大 小 的 参照 ， 同 时 也 是 我 们 在 下 一 步 了 解 移 动 设 备 人 体 工程 学 中 天 于 区 域 划分 的 重 
要 依据 。 

但 是 想 要 归纳 和 了 解 Android 和 Windows Phone 平台 移动 设备 的 像素 尺寸 ， 就 没有 那么 容易 了 ， 
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原因 是 这 两 个 平台 的 产品 种 类 实在 太 多 ， 而 且 是 由 众多 的 生产 厂商 设计 生产 出 来 的 ， 既 没有 统一 的 规格 样 
式 ， 也 没有 统一 的 屏幕 尺寸 ( 如 图 4-3 所 示 )。 


4-3 

Android 和 Windows 
Phone 平台 的 众多 移动 
设备 种 类 


不 过 要 是 细心 忠 结 的 话 ， 我 们 也 并 不 是 完全 没有 依据 可 循 。 概 括 一 下 ， 我 们 大 致 可 以 做 出 以 下 划分 : 
低 端 手机 设备 的 屏 坟 显示 尺寸 一 般 为 480 x 320 像素 ， 局 清 屏 需 手 机 一 般 是 960 x 640 像素 ， 也 有 一 部 
分 是 800 x 600 像素 。 而 平板 电脑 可 以 根据 对 角 尺 寸 分 为 : 5 十 屏 800 x 480 像素 ,7 十 屏 1024 x 600 
像素 ，8 寸 屏 1024 x 768 像素 ，9 十 屏 1280 x 800 像素 ，10 十 屏 根 据 长 宽 比 分 为 1366 x 768 像素 和 
1280 x 800 像素 两 各， 部 分 高 新 市 有 视网膜 技术 的 屏 项 可 达到 1920 x 1080 像素 。 我 们 都 知道， 图 像 的 
像素 大 小 是 可 以 根据 尺寸 器 下 兼容 的 ， 也 残 是 说 ， 我 们 在 绘图 软件 中 设计 制作 出 来 的 图 像 如 果 偏 大 ， 那 么 
载 入 到 移动 设备 中 会 被 缩小 ， 它 的 清晰 度 是 不 会 损失 的 ， 反 过 来 ， 如 果 图 像 偏 小 ， 载 入 到 高 清 屏 共 上 丈 会 
馈 捉 开放 大 ， 这 时 候 图 像 束 会 变 模 糊 ， 显 得 很 粗粮。 所 以 我 们 在 绘图 起 始 、 生 成 图 像 文件 之 前 ， 最 好 先 了 
解 好 目 己 的 应 用 会 在 什么 样 的 设备 上 运行 和 使 用 ， 尽 量 按照 最 大 的 屏 带 像素 尺寸 生成 文件 ， 这 样 才能 够 运 


应 各 种 移动 设备 的 屏 之 显示 效果 。 


4.1.3 移动 设备 的 使 用 方法 


三 大 平台 的 移动 设备 在 使 用 万 法 上 都 有 所 差异 ， 因 此 我 们 在 设计 应 用 程序 之 前 必须 对 其 了 如 指 擎 ， 这 
对 于 移动 频 用 的 用 户 体验 设计 全 天 重要 。 
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首先 ， 我 们 要 了 解 几 种 移动 设备 操作 按键 的 类 型 ， 也 融 是 我 们 经 剃 会 遇 到 的 物理 按键 、 触 措 按 键 和 虚 
拟 按键 ,如 图 4-4 所 示 。 物 理 按 键 是 通过 手指 的 按压 可 以 握 下 并 弹 起 的 按键 ,在 旧式 移动 设备 中 比较 多 见 。 
随 厦 各 大 生产 广 商 对 产品 硬件 的 不 断 升 级 ， 这 种 按键 在 移动 设备 上 越 来 越 少 ， 当 下 的 新 产品 中 几乎 已 经 很 
少 出 现 了 。 触摸 按键 -一般 状 态 下 以 高 亮 显 示 ， 通 过 手指 的 触摸 可 以 执行 操作 的 按键 ， 也 称 作 电 容 式 触 
操 按 键 。 而 “虚拟 按键 ” 则 是 在 触摸 屏幕 上 根据 应 用 程序 的 功能 要 求 随机 出 现 ， 通 过 点 击 触 措 屏 来 达到 操 
作 的 目的 。 
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名 天 jj 世人 秘 贡 安 时 乡 
移动 设备 的 3 种 按键 形式 虚拟 按键 


gwe rt yu rirsop 


asdffgh jklI 
触摸 按键 


人 


物理 按键 


同时 ， 开机 键 、 音量 + 、 音量 - 这 3 个 物理 按键 是 几乎 所 有 智能 移动 设备 必 备 的 ， 但 通常 不 
会 出 现在 操作 面板 上 ， 而 是 设置 在 设备 的 两 侧 或 项 部 。 由 于 绝 大 多 数 用 尸 对 这 些 按键 的 功能 非常 熟悉 ， 这 
里 丈 不 做 过 多 解释 。 操 作 面 板 上 的 几 个 按键 ,我 们 需要 为 大 家 详细 解释 一 下 ， 原 因 是 三 大 平台 的 移动 设备 
在 这 万 面 的 设计 理念 及 操作 方法 各 不 相同 ， 而 且 这 也 影响 到 了 界面 设计 的 控件 设置 和 布局 安排 。 

下 面 我 们 分 别 介 绍 三 大 平台 移动 设备 在 操作 面板 上 的 设计 以 及 操作 万 法 上 的 区 别 。 首 先 还 是 从 规格 和 
样式 比较 统一 和 规范 的 1OS 平台 移动 设备 开始 。 通 过 图 4-5 可 以 看 到 ，iOS 平台 的 移动 设备 的 操作 面板 
上 只 有 一 个 圆 形 的 物理 按键 一 一 Home 键 ， 除 此 之 外 的 一 切 操作 都 由 系统 和 应 用 平台 内 部 的 虚拟 按键 
完成 。 
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图 4-5 
iOS 平台 移动 设备 的 按键 设置 


无 论 在 哪 一 个 操作 平台 上 ( 包括 iOS、Android 和 Windows Phone 平台 ),“Home” 键 的 功能 都 
是 相同 的 ， 那 就 是 在 任何 状态 下 退出 当前 画面 ， 回 到 启动 界面 。 但 是 ，iOS 移动 设备 上 的 这 个 “Home” 
键 略 有 些 特殊 ， 如 果 已 经 处 在 系统 首页 ， 按 下 “Home” 键 则 会 打开 搜索 功能 ; 而 在 任何 状态 下 ， 连 续 按 
两 次 “Home 键 ， 都 可 以 浏览 后 台 挂 起 和 最 近 打 开 的 应 用 程序 。 

由 于 Android 平台 的 移动 设备 种 类 太 多 ， 因 此 在 操作 面板 的 按键 安排 上 很 难 告诉 大 家 一 个 统一 的 配置 
样板 。 不 过 用 心 归纳 一 下 ， 我 们 可 以 通过 图 4-6 中 的 几 款 移动 设备 来 总 结 一 下 Android 平台 的 移动 设备 
在 按键 安排 上 的 特点 。 


Ee 


sex 1 
-一 :| 司 轩 


4-6 
Android 平台 移动 设备 的 按键 设置 
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从 左 侧 的 一 款 手机 可 以 看 到 Android 系统 的 早期 版 本 对 按键 配置 的 要 求 。 在 操作 面板 显示 屏 下 侧 ， 有 
4 个 触摸 按键 ， 依 次 是 菜单 键 、Home 键 、 返 回 键 及 搜索 键 ， 这 个 次 序 有 时 会 变动 。 菜单 键 ” 可 以 在 任 
何 情况 下 打开 系统 或 应 用 程序 的 功能 菜单 ， 当 然 前 提 是 应 用 程序 设置 了 菜单 选项 。 返回 键 ” 则 是 在 任何 
情况 下 返回 上 一 级 界面 ， 或 是 关闭 当前 的 功能 或 程序 ， 直 到 退出 应 用 程序 返回 到 桌面 为 止 。 搜索 键 ”是 
打开 系统 自 市 的 搜索 功能 。 自 从 Android 4.0 版 本 普及 后 ， 这 种 安排 和 设置 按键 的 产品 逐渐 退出 市 场 。 

中 间 这 款 手机 的 按键 设计 安排 相对 比较 普遍 。 由 于 新 版 本 的 Android 系统 将 搜索 功能 设置 成 虚拟 按键 
并 安放 在 了 屏幕 的 最 上 方 ， 因 此 在 操作 面板 下 方 不 再 设置 搜索 键 ; 同时 “Home 键 ”被 设计 成 物理 按键 放 
置 在 中 间 , 菜单 键 在 左 , 返回 键 在 右 , 这 样 的 安排 无 论 从 视觉 识别 上 还 是 操作 上 明显 比 前 者 更 加 简易 方便。 

而 右 侧 这 款 手机 的 操作 面板 设计 则 更 加 简约 、 时 尚 ， 是 针对 Android 4.0 版 本 的 最 新 设计 ， 也 是 时 下 
最 主流 的 样式 。 我 们 可 以 看 到 ， 在 按键 设计 上 它 已 经 彻底 放弃 了 物理 按键 和 触摸 按键 ， 完 全 使 用 虚拟 按键 
来 控制 系统 或 应 用 程序 。 当 然 ， 原 本 的 3 个 功能 按键 还 是 保留 了 下 来 ， 依 然 安排 在 界面 的 最 下 方 ， 但 是 经 
过 体验 我 们 观察 到 原本 放 在 “Home 键 ” 右 侧 的 返回 键 放置 在 了 左 侧 ， 而 “菜单 键 ” 被 取消 ， 取 而 代 之 的 
是 “浏览 最 近 打 开 的 程序 ”功能 。 这 个 设计 使 用 户 查 找 和 打开 应 用 程序 更 加 快速 、 人 性 化 。Android 平台 
的 平板 电脑 设备 也 使 用 了 这 种 按键 设置 方式 ( 如 图 4-6 的 底 图 )。 

接 下 来 ， 我 们 来 看 看 Windows Phone 平台 移动 设备 在 操作 面板 上 的 按键 设置 。 通 过 图 4-7 我 们 一 
目 了 然 地 看 到 , 虽然 产品 的 品牌 和 型 号 各 不 相同 ,但 是 按键 配置 比较 统一 。3 个 按键 中 ,中 间 的 是 Home 键 ， 
左 侧 的 是 返回 键 ， 右 侧 的 是 搜索 键 。 虽 然 按键 图 标的 样式 与 Android 平台 的 不 一 样 ， 但 是 在 功能 和 使 用 方 
法 上 是 完全 一 样 的 。 


4-7 
Windows Phone 平台 的 移动 


“ 放 
设备 
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通过 对 三 大 平台 移动 设备 的 操作 面板 按键 设置 所 做 的 比较 ， 我 们 可 以 做 出 如 下 总 结 

。 三 大 平台 的 移动 设备 都 有 “ Home 键 ， 并 把 它 作为 重要 的 核心 功能 ， 这 明显 是 基于 在 用 户 体验 中 
能 售 快 速 退出 和 跳 转 万 便 而 进行 的 设计 。 

。 Android 和 Windows Phone 平台 的 移动 设备 无 论 经 历 过 怎样 的 友 展 和 变化 ， 都 保留 了 “返回 键 ” 
功能 ， 因 此 在 设计 这 两 个 平台 的 应 用 程序 原型 时 ， 无 须 考 虑 设置 页 面 导 航 的 返回 控件 。 而 iOS 平 
台 则 相反 ， 由 于 操作 面板 上 没有 设置 “返回 键 ， 所 以 我 们 必须 在 设计 应 用 原型 的 导航 时 ， 充 分 考 
虑 到 页 面 跳 转 和 返回 主页 的 方式 。 

。 在 Android 平台 移动 设备 的 最 新 面板 设计 里 ， 以 及 iOS 平台 的 “Home 键 ”的 附加 功能 里 ， 都 设 

“浏览 最 近 打 开 应 用 程序 ”的 功能 。 这 也 是 为 了 方便 用 户 能 够 快速 地 在 各 个 应 用 之 间 跳 转 的 
效率 型 设计 ， 它 从 另 一 个 角度 提醒 每 一 位 应 用 开发 设计 人 员 ， 设 计 在 功能 上 应 该 尽量 专 一 ， 大 而 
全 的 应 用 在 将 来 会 越 来 越 失 去 竞争 力 。 

。 通过 iOS 平台 移动 设备 的 简约 式 设计 ， 以 及 Android 平台 移动 设备 设计 的 精简 化 发 展 过 程 ， 我 们 
可 以 体会 到 在 将 来 的 移动 应 用 设计 发 展 中 ， 我 们 的 功能 设置 和 交互 方式 不 能 依赖 于 设备 自 带 的 按 
键 ， 而 应 该 在 应 用 自身 的 布局 和 控件 安排 中 进行 配置 和 优化 ， 对 功能 要 尽量 精简 ， 降 低 用 户 的 操 
作 难 度 ， 提 高 用 户 的 操作 效率 。 

那么 ， 如 何 才能 更 加 有 效 地 加 强 应 用 产品 的 交互 体验 ， 提 高 用 户 对 我 们 的 应 用 产品 的 认同 感 呢 ? 那 就 

要 看 我 们 是 不 是 真 的 以 用 户 为 本 ， 从 各 个 方面 都 细致 入 微 地 站 在 用 户 的 角度 上 考虑 问题 。 下 面 从 我 们 的 手 
指 开始 ， 探 索 如 何 优化 移动 应 用 用 户 体验 的 交互 方式 。 


4.2 ”移动 设备 的 人 体 工程 学 特点 


人体 工程 学 ”这 个 词 听 起 来 似乎 有 些 专业 和 深奥 ， 但 它 其 实 是 和 我 们 的 生活 最 密 不 可 分 的 一 | 门 学 问 ， 
无 论 我 们 做 哪 万 面 的 设计 ， 都 会 有 相应 的 人 体 工程 学 内 容 需 要 去 了 解 。 它 研究 的 是 人 和 工具 、 人 和 产品 以 
及 人 和 环境 的 关系 ， 关 注 人 们 在 工作 中 、 生 活 和 休息 时 怎样 才能 更 加 高 效 、 健 康 、 安 全 和 和 舒适。 此 外 ,， 它 
还 涉及 人 体 的 解剖 学 、 生 理学 和 心理 学 等 方面 的 训 识 。 对 于 移动 应 用 的 用 户 体验 设计 来 说， 人 体 工程 学 
当然 也 尤为 重要 。 


4.2.1 了 解 你 的 拇 措 


正 因为 拥有 灵活 的 拇指 ， 我 们 的 双手 才能 够 完成 工作 和 生活 中 无 数 复杂 和 高 难度 的 动作 。 同 样 ， 在 操 
作 移动 设备 的 时 候 ， 拇 指 可 以 算是 人 体 上 最 快速 、 最 高 效 、 使 用 频率 最 高 的 器 官 了 。 无 论 是 操作 手机 还 是 
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平板 电脑 ， 拇 措 都 是 你 首选 的 操作 工具 。 因 此 ， 我 们 束 从 拇指 开始 了 解 移动 设备 的 人 体 工程 学 特点 。 在 这 
一 节 中 ， 我 们 先 主要 针对 蛙 手 操作 ， 也 就 是 手机 设备 来 进行 分 析 。 关 于 双手 操作 ， 我 们 会 在 下 一 节 中 分 析 
研究 


出 


我 们 在 操作 手机 设备 时 ， 大 多 数 情况 下 还 是 喜欢 单 手 操作 的 ， 这 样 我 们 融 可 以 解放 出 另 一 只 手 来 完成 
其 他 的 任务 。 因 此 ， 你 的 移动 应 用 是 不 是 好 用 ， 很 天 键 的 一 个 考验 区 是 是 人 否 适 合 曲 手 操作 。 

通过 图 4-8 可 以 看 到 ,在 单 手 操作 手机 时 只 有 拇 所 能 够 目 由 灵活 地 操作 设备 。 根 据 拇 指 与 屏 需 的 天 系 ， 
我 们 制作 出 了 针对 拇指 舒适 度 的 区 域 分 布 图 ( 如 图 4-8 右 图 所 示 )， 根 据 色彩 我 们 可 以 体会 拇指 在 手机 屏 
副 上 点 击 、 滑 动 时 的 舒 适度 。 这 里 我 们 针对 右手 习惯 的 用 尸 进行 分 析 ， 左 撤 子 可 以 翻转 过 来 ， 有 反问 理 解 。 
红色 部 分 是 拇指 最 易 点 击 的 区 域 , 村 色 其 次 ; 由 于 拇 握 的 长 度 限 制 , 因此 左 侧 的 区 域 筷 击 起 来 相对 比较 放松 ， 
和 而 顶部 和 右 下 角 是 最 难点 击 的 区 域 。 


图 4-8 
移动 设备 的 单 手 操作 


拇指 单 手 屏 右 点 击 舒 适度 
热度 区 域 分 布 图 


了 解 拇指 点 击 舒适 度 的 屏幕 区 域 划分 ， 对 应 用 界面 的 布局 安排 是 非常 有 意义 的 。 经 常 点 击 的 或 者 相对 
重要 的 控件 要 尽量 安置 在 拇指 易于 点 击 的 区 域 ， 而 危险 性 的 操作 ( 比如 删除 或 编辑 ) 或 者 不 易 被 使 用 的 控 
件 可 以 安置 在 相对 难以 点 击 的 区 域 。 同 时 ， 我 们 应 该 把 导航 栏 和 菜单 栏 放置 在 界面 的 底部 ， 这 与 我 们 使 用 
电脑 浏览 网 页 的 习惯 有 所 背离 。 如 果 简 单 地 按照 习惯 把 它们 安置 在 界面 顶端 ， 就 会 使 用 户 的 拇指 感到 非常 
别扭 。 

在 图 4-9 中 ， 我 们 通过 拇指 的 舒适 度 区 域 分 布 图 对 3 款 不 同 平 台 的 应 用 进行 了 测试 。3 款 应 用 都 把 
重要 功能 放置 在 了 界面 的 底部 ，iOS 平台 的 “Photopod” 除 了 相对 危险 的 “清除 完成 键 ” 和 不 常 使 用 的 
设置 键 外 ， 重 要 的 控件 都 避 开 了 难以 点 击 的 区 域 ，Android 平台 的 “Gmail” 为 了 方便 勾 选 ， 将 选择 框 一 
律 安置 在 界面 左 侧 ; Windows Phone 平台 的 “USA Today” 中 特意 把 视频 播放 按键 安放 在 画面 的 左 侧 ， 
用 意 一 目 了 然 。 
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图 4-9 iOS 平 台 的 “Photopod”( 左 图 ) Android 平 台 的 “Gmail”( 中 图 ) 和 
Windows Phone 平台 的 “USA Today”( 右 图 ) 


针对 左 搬 子 的 用 户 ， 早 期 有 毕 应 用 还 特意 设置 了 将 控件 布局 左 石 翻转 的 设置 ， 但 是 结果 虽然 适合 了 他 
们 手指 的 舒适 性 ， 却 打破 了 思维 上 的 惯性 。 也 束 是 说 ， 无 论 从 视 党 顺序 上 还 是 思考 顺序 上 ， 都 使 这 些 特殊 
的 用 尸 耗 费 更 多 的 脑力 来 适应 ,其 结果 并 没有 给 他 们 市 来 更 多 的 万 便 , 反 而 使 应 用 操作 起 来 更 加 复杂 。 因此 ， 
现在 的 移动 应 用 中 很 少 有 控件 布局 左右 翻转 的 功能 了 。 这 也 提示 了 我 们 ， 一味 地 迎合 人 体 的 舒适 性 而 打破 
人 们 视 完 上 和 思维 上 的 惯性 ， 有 时 会 适得其反 。 应 用 的 界面 布局 必须 要 多 方面 的 全 盘 考 虑 。 

从 图 4-10 所 示 的 3 款 应 用 中 我 们 可 以 体会 到， 很 多 应 用 在 界面 布局 上 都 充分 考虑 了 左 撒 子 使 用 的 千 
适 性 问题 ， 无 论 是 按键 、 列 表 项 目 还 是 表 蛙 样式 的 设计 都 平等 地 对 待 了 左右 手 的 拇指 。 


word 


SAO Es 
play 


StOFe 


top scores 


图 4-10 iOS 平台 的 “Word Crasher”( 左 图 ).Android 平台 的 “ESPN ScoreCenter 
(中 图 ) 和 Windows Phone 平台 的 “Esponce QR Reader”( 右 图 ) 
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4.2.2 音 手 操作 还 是 双手 操作 


手机 设备 上 的 应 用 并 不 都 受 音 手 操作 的 束缚 ， 很 多 应 用 或 游戏 都 是 基于 双手 操作 而 开 友 的 。 尤 其 在 横 
屏 模 式 下 ， 要求 我 们 的 双手 共同 参与 屏幕 操作 ， 这 样 似乎 束 不 受 拇指 灵活 度 的 限制 。 由 于 手机 的 体积 较 小 ， 
我 们 的 右手 可 以 完全 离开 设备 ， 使 用 食指 与 拇 措 搭配 ， 完 成 更 加 快速 和 精细 的 操作 ， 因 为 食指 比 拇指 更 加 
灵敏 、 精 确 。 

而 平板 电脑 的 操作 则 必须 由 双手 进行 。 由 于 设备 的 体积 和 重量 相对 较 大 《 这 里 针对 的 是 主流 的 9 至 
11 英寸 的 平板 电脑 )， 所 以 需要 两 只 手 同 时 握 住 设备 。 虽 然 右手 可 以 暂时 离开 设备 进行 操作 ， 但 是 在 行走 
或 坐 臣 过程 中 ,大 部 分 时 间 还 是 需要 双手 来 把 握 的 。 在 这 样 的 情况 下 ,两 个 拇 所 依然 成 为 最 下 选 的 操作 工具 ， 
只 有 在 不 得 已 的 情况 下 ， 我 们 才 会 临时 动用 食 措 来 进行 细节 的 操作 。 我 们 可 以 参考 图 4-11 中 石 图 的 双手 
拇指 的 千 适 度 区 域 划 分 来 考虑 我 们 的 界面 布局 。 


图 4 一 11 
移动 设备 的 双手 操作 


拇指 双手 屏幕 点 击 舒适 度 
热度 区 域 分 布 图 


从 图 4-12 中 可 以 看 到 ，iOS 平台 的 “SBS World News” 和 Android 平台 的 “系统 设置 ”都 是 为 
了 使 用 户 在 操作 程序 时 双手 无 需 离开 设备 而 设计 的 ， 把 几乎 所 有 的 控件 、 工 具 以 及 选项 都 安排 在 了 界面 的 
两 侧 和 底部 ， 真 正 做 到 了 操作 体验 与 视觉 体验 的 完美 统一 ， 以 及 以 用 户 为 本 的 设计 理念 。 


图 4-12 

iOS 平 台 的 “SBS World 
News”( 左 图 ) 和 Android 
平台 的 “系统 设置 ”( 右 图 ) 
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无 论 我 们 使 用 单 手 操作 还 是 双手 操作 ， 对 使 用 各 种 “手势 ”的 技巧 必须 熟悉 。 能 够 使 用 手势 ， 是 移动 
设备 优 于 使 用 鼠标 、 键 盘 的 普通 个 人 电脑 最 显著 的 特征 ， 也 是 触 措 屏 扩 术 最 核心 的 功能 。 现 在 我 们 分 别 对 
单 手 指 手势 〈 单 手 操作 可 以 实现 ) 和 多 手指 手势 ( 需 双 手 操作 实现 ) 在 三 大 平台 中 的 特点 加 以 介绍 。 

1. 单 手指 手势 

里 手 捐 手 势 的 特点 如 下 所 示 。 

。 模 同 滑动 。 一 般 情况 下 可 以 实现 左右 翻 页 浏览 。 同时， 在 iOS 平台 的 部 分 应 用 中 ， 可 以 通过 横 回 
滑动 来 激活 列表 项 目的 选项 ， 标 准 模 式 下 为 “删除 ”选项 ( 如 图 4-13 左 图 所 示 )， 设 计 者 也 可 以 
根据 需要 定义 或 增加 其 他 选项 。 

。 纵 回 滑动 。 一 般 情 况 下 可 以 实现 上 下 翻 页 浏览 。 在 绝 大 部 分 的 应 用 中 ， 当 滑动 到 顶端 时 ， 会 目 动 
转换 为 “刷新 ”功能 ( 如 图 4-13 中 图 所 示 )。 
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图 4-13 iOS 平 台 的 “邮箱 ”中 的 手势 运用 


。 双击 。 一 般 情况 下 可 以 实现 局 部 放大 ， 主 要 针对 地 图 工具 和 图 像 浏览 功能 。 在 图 片 浏览 器 中 除了 
局 部 放大 外 ， 还 可 以 通过 双击 来 还 原 成 满 屏 大 小 显示 。 

。 长 点 。 这 个 手势 含义 比较 多 。 一 般 情况 下 ， 长 点 会 激活 文本 复制 和 段落 选择 的 功能 ， 并 在 输 
入 模式 下 激活 粘贴 功能 。 在 iOS 平台 的 浏览 器 及 文本 工具 中 ， 长 点 还 可 以 激活 “局 部 放大 镜 ” 
(如 图 4-13 右 图 所 示 )。 在 Android 及 Windows Phone 平台 中 ， 长 点 可 以 激活 列表 项 目的 选项 
菜单 ， 通 常 包括 删除 、 复 制 、 剪 切 和 重 命 名 等 ( 如 图 4-14 所 示 )。 
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。 长 点 加 拖 动 。 一 般 情 况 下 可 以 实现 对 图 标 、 标 党 及 卡片 的 移动 。 

2. 多 手指 手势 

多 手指 手势 的 特点 如 下 。 

。 捏 和 捉 。 这 是 需要 两 个 手指 完成 的 手势 ， 也 束 是 两 个 手 捐 之 间 的 收 放 动作 ， 主 要 起 到 缩小 
和 放大 的 作用 ( 如 图 4-15 所 示 )。 


1 


图 4-15 
“ 捍 ” 和 “ 揽 ” 的 手势 a 二 


喜 
7 


。 两 手指 双击 。 缩 小 功能 。 这 铠 介 算是 一 个 鲜 为 人 知 的 功能 了 ， 在 Google 地 图 中 第 一 次 被 使 用 ， 
主要 是 针对 蛙 手 指 双 击 的 放大 功能 而 开 友 的 。 
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。 抓 和 放 。 这 两 个 功能 只 有 在 iPad 中 才 可 以 使 用 ， 它 需要 5 个 手指 同时 使 用 。 抓 ” 是 指 5 
个 手指 在 屏幕 上 向 中 心 同时 聚 扰 ， 可 以 起 到 快速 关闭 或 退出 的 作用 ;“ 放 ” 则 反 过 来 ，5 个 手指 从 
中 心 同 时 展开 ， 可 激活 “浏览 最 近 打 开 的 程序 ”功能 。 
我 们 在 这 里 为 大 家 介绍 的 是 移动 应 用 中 比较 单 见 的 手 巡 ， 还 有 更 多 的 手 奴 可 以 通过 我 们 目 己 的 创意 和 
开 友 来 实现 。 但 是 无 论 使 用 标准 手势 还 是 研 友 出 新 的 手势 ， 一 定 要 记 着 在 应 用 的 帮助 文档 中 加 以 详尽 的 说 
明 ， 因 为 绝 大 部 分 用 尸 是 不 会 靠 目 己 的 摸索 来 友 现 你 的 特殊 功能 的 。 我 们 经 党 会 遇 到 一 些 智 能 移动 设备 的 
老 用 尸 ， 在 多 年 之 后 才 友 现 双 击 屏 窜 可 以 使 图 像 局 部 放大 。 当 然 ， 了 解 各 种 标准 手势 ， 对 设计 的 布局 安排 
与 控件 设置 也 很 有 帮助 ， 很 多 功能 或 控件 可 以 简化 或 去 除 。 比 如 ， 由 于 使 用 捏 和 “ 提 的 手势 进行 缩 
放 已 经 家 广大 移动 用 户 所 丈 阳 ， 所 以 我 们 友 现 任何 平台 的 图 片 浏 贤 器 中 都 不 再 设置 缩放 功能 的 控件 了 。 


4.2.3 ”善待 你 的 指 尖 


在 成 干 上 万 个 移动 应 用 中 ， 我 们 会 看 到 很 多 功能 和 布局 非常 复杂 的 产品 。 每 一 个 设计 师 都 希望 目 己 的 
作品 既 能 够 使 用 方便 又 能 够 功能 强大 ,结果 往往 是 鱼 和 熊 擎 不 能 兼 得 ,最 终 把 目 己 的 界面 设计 得 拥挤 不 堪 ， 
不 是 按键 挨 得 太 近 容易 点 销 ， 束 是 控件 太 小 不 易 点 击 ， 或 是 界面 杂乱 不 易 分 辨 ， 使 用 户 在 你 的 界面 上 艰难 
地 摸索 ， 饱 受挫 折 ， 示 例 图 如 图 4-16 所 示 。 这 里 我 们 必须 帮助 大 家 有 条 不 系 地 把 这 个 难题 解决 好 。 万 法 
其 实 很 简单 ， 那 瓯 是 分 析 和 了 解 你 的 指 尖 。 
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图 4-16 iOS 平台 的 “Epicurious”( 左 图 ) 、Android 平台 的 “Speedtest.net”( 中 图 ) 和 Windows 
Phone 平台 的 “Control Your Weight”( 右 图 ) 


第 4 章 移动 应 用 的 交互 特点 


从 前 面 两 节 我 们 体会 到 ， 要 想 设 计 完美 的 用 户 体 验 ， 必 须 了 解 移动 设备 的 人 体 工程 学 特点 。 最 主要 的 
瓯 是 了 解 我 们 的 双手 与 触 措 屏 之 间 的 关系， 能 个 针对 这 个 关系 调整 好 我 们 应 用 的 各 项 设置 ， 这 对 于 成 功 的 
用 户 体验 设计 全 天 重要 。 那 么 接 下 来 ， 我 们 将 继续 深入 了 解 手指 与 应 用 界面 乙 辣 的 互动 ， 分 析 手 捐 的 点 击 
与 控件 大 小 之 间 的 天 系 。 

我 们 屏 容 上 的 每 一 个 点 击 目标 都 是 为 了 指 尖 的 触 近 击 存在 的 ， 因 此 我 们 应 用 界面 的 布局 安排 和 控件 设 
置 都 应 该 细 心地 去 迎合 指 尖 的 大 小 而 设计 。 那么 在 点 击 屏 之 时 我 们 的 指 尖 需要 占用 多 大 的 尺寸 呢 ? 在 这 里 ， 
三 大 平台 给 出 的 尺寸 各 不 相同 。 毕 葛 每 个 人 的 手指 大 小 、 粗 细 都 不 相同 ， 因 此 我 们 可 以 粗略 地 把 这 个 尺寸 
限定 在 7 毫米 至 10 台 米 之 间 。 也 殊 是 说 ， 我 们 的 按键 高 度 只 要 不 小 于 7 之 米 ， 丈 可 以 保证 用 手指 触摸 起 
来 比较 准确 和 容易 。 

让 我 们 先 来 看 一 看 iOS 平台 对 指 尖 的 定义 标准 吧 。 苹果 公 司 把 这 个 区 域 的 角度 定义 为 44 点 ， 大 约 


7 上 毫米。 当然， 在 早期 的 屏 夫 分 辨 率 中 ， 一 个 点 束 代 表 一 个 像素 。 在 新 的 视网膜 屏 之 分 辨 紊 下， 一 个 点 包 
合 横 同 两 个 像素 和 纵 同 两 个 像素 ， 这 个 高 度 束 成 为 了 88 像素 。 在 iOS 平台 的 移动 设备 上 ， 这 样 的 尺寸 


随处 可 见 ， 标 准 列 表 、 虚 拟 键 盘 、 导 航 栏 、 标 签 栏 和 列表 项 目 等 都 能 看 到 统一 的 44 点 的 局 度 ， 这 已 经 成 
为 了 iOS 界面 的 设计 规律 ， 如 图 4-17 所 示 。 


88 点 44 点 〈88 像 素 ) 
( 176 像 素 ) NO 
收 件 人 : | 加 44 点 (88 像素 ) 
抄 达 / 密 达 : 44 点 〈88 像 素 ) 
88 点 === 
( 176 像 素 ) 


30 点 (60 像素 ) 


44 点 (88 像素 ) 


= BOOVOND < 
1 EE 


图 4-17 iOS 平台 基于 捐 尖 尺寸 的 界面 设计 规律 


通过 图 4-17 我 们 可 以 清晰 地 体会 到 ，iOS 界面 以 44 后 为 标准 和 基数 的 界面 设计 规律 。 应 用 的 启动 
图 标 所 占 的 空间 ， 都 是 以 44 后 为 基数 来 安排 的 ( 如 图 4-17 左 图 所 示 )。 而 导航 栏 里 的 按键 高 度 虽 然 没 
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44 点 (只 有 29 点)， 但 是 它 的 实际 点击 区 域 的 高 度 实 际 上 丈 是 整个 导航 栏 。 即 使 你 没有 点 中 按钮 的 中 心 ， 
只 要 是 点 在 了 导航 栏 之 内 ,都 算是 点 到 了 按钮 如 图 4-17 右 图 所 示 )。 至 于 点 击 的 宽度 ,一般 没有 固定 尺寸 ， 
但 是 我 们 可 以 观察 一 下 虚拟 键盘 的 按键 宽 展 ， 大 小 是 30 点 ， 因 此 可 以 把 它 作为 我 们 更 度 的 最 小 标准 ， 也 
融 是 说 单个 控件 的 最 小 宽度 不 能 小 于 30 点 《视网膜 分 辨 率 为 60 像素 )。 

Android 平 台 也 有 一 个 根据 指 尖 大 小 计算 出 来 的 基础 日 位 ,尺寸 是 48 点 ,大 约 9 毫 米 ,如 图 4-18 所 示 。 
由 于 Android 平台 的 移动 设备 种 类 众多 ， 所 以 这 个 尺寸 会 有 变化 ， 但 是 不 会 小 于 7 富 米 。 
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4-18 Android 平台 基于 指 尖 尺寸 的 界面 设计 规律 


通过 图 4-18， 我 们 可 以 找到 与 iOS 平台 类 似 的 并 以 48 像素 为 基数 的 界面 设计 规律 。 而 Android 
平台 的 尺寸 规范 在 细节 上 还 有 更 进一步 的 要 求 ， 就 是 每 个 界面 元 素 之 间 要 留 有 8 像素 的 空间 间隙 〈 如 图 
4-18 右 图 所 示 )。 这 样 的 设计 使 得 用 户 的 指 尖 点 击 和 触摸 界面 时 更 加 容易 、 舒 适 。 

Windows Phone 平台 的 情况 有 些 特殊 。 由 于 它 在 设计 风格 上 走 了 简约 和 扁平 化 的 风格 ， 因 此 界面 上 
没有 明显 的 修饰 和 分 割 ， 主 要 靠 文 字 和 磁 贴 作为 界面 元 素 。 在 尺寸 要 求 上 ， 也 没有 明确 的 基础 尺寸 作为 设 
计 规 律 ， 但 是 有 几 个 细节 上 的 规范 尺寸 需要 注意 ( 如 图 4-19 所 示 )。 
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4-19 Windows Phone 平台 的 界面 尺寸 规范 


Windows Phone 平台 的 规范 尺寸 单位 并 没有 使 用 像素 ， 而 是 使 用 毫米 来 度量 。 普 通 界面 元 素 推荐 的 
扎 击 区 域 不 小 于 9 富 米 ,最 小 的 点 击 区 域 不 小 于 7 之 米 ,两 个 元 素 之 间 的 间 阶 不 大 于 7 毫米 ,不 小 于 2 富 米 。 
同时 ， 由 于 很 少 对 界面 元 素 的 区 域 进行 分 割 ， 所 以 Windows Phone 平台 的 规范 要 求 点 击 的 有 效 区 域 必 
须 大 于 可 视 元 素 ( 磁 贴 或 文字 ) 的 区 域 。 针 对 磁 贴 的 规格 大 小 要 求 以 及 文字 的 大 小 ， 我 们 会 在 7.4.1 节 以 
及 8.2 节 进 行 讲解 。 

以 上 的 诸多 数据 ， 都 是 我 们 为 三 大 平台 的 移动 应 用 进行 用 户 体 验 设计 时 的 重要 参考 。 相 信 大 家 通过 对 
虽 尖 的 人 体 工程 学 分 析 所 得 出 的 经 验 参考 ， 可 以 使 自己 的 产品 更 加 好 用 ,充满 人 性 化 并 增加 舒适 性 。 同 时 ， 
我 们 还 要 羡 于 隐 壮 过 多 的 项 目 、 列 表 和 界面 元 素 。 毕 竟 我 们 的 应 用 需要 迎合 一 部 分 高 新 的 或 是 对 功能 要 求 
比较 局 、 比 较 细致 的 用 户 。 那 么 ， 对 于 一 些 相对 烦琐 的 、 不 划 点 击 的 功能 ， 我 们 不 能 让 它们 占用 有 限 的 界 
面 室 间 。 

4-20 中 的 3 款 应 用 给 我 们 提供 了 一 些 办 法 ,有 效 地 隐藏 了 过 多 的 控件 和 功能 , 既 保留 住 了 应 用 高 端 、 
强大 的 功能 组 ， 又 保持 了 界面 宽松 和 指 尖 点 击 的 舒适 性 。 在 iOS 平台 的 “Bus New York City” 的 主页 面 
上 , 由 于 标签 栏 的 项 目 过 多 , 如 果 平 均 放置 , 势必 会 造成 拥挤 , 加 大 点 击 的 难度 , 因此 设计 师 使 用 了 “更 多 
选项 ， 把 相对 不 常 被 使 用 的 项 目 巧 妙 地 隐藏 了 起 来 。Android 平台 的 “印象 笔记 ”的 做 法 很 像 是 在 界面 上 
安 流 了 一 扇 暗 门 ， 当 我 们 在 界面 上 横向 滑动 的 时 候 ， 束 开局 了 这 扇 暗 门 。 这 肩 门 甚至 可 以 两 边 开 启 ， 把 我 
们 的 高 端 功能 和 细节 选项 都 藏 在 里 面 , 不 过 这 样 的 设计 方式 最 好 在 应 用 首次 运行 的 时 候 加 入 一 些 现场 提示 ， 
否则 那些 初级 的 移动 用 户 很 难 发 现 它 。Windows Phone 平台 的 “USA Today” 采 用 了 和 iOS 平台 类 似 
的 隐藏 方法 ， 只 是 采用 了 菜单 的 方式 ， 通 过 纵向 滑动 把 它 从 底部 拉 出 来 ， 从 操作 上 看 似乎 更 加 直观 和 方便 。 
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图 4-20 ”iOS 平台 的 “Bus New York City”( 左 图 )、Android 平台 的 “印象 笔记 ”( 中 图 ) 和 Windows 
Phone 平台 的 “USA Today”( 右 图 ) 


从 里 手 到 双手 、 从 手 擎 到 指 尖 ， 我 们 对 移动 设备 的 人 体 工 程 学 的 特点 了 解 得 越 友 详细 了 。 然 而 ， 无 论 
是 从 交互 设计 学 上 还 是 从 人 体 工程 学 的 生理 研究 对 象 上 ， 我 们 的 双手 并 不 是 唯一 和 移动 设备 产生 天 系 的 器 
官 。 那 么 ， 我 们 还 需要 研究 和 考虑 哪个 方面 呢 ? 当然 是 “眼睛 。 要 了 解 移 动 设备 的 交互 特点 ， 视 觉 因素 
束 显 得 更 加 重要 ， 因 此 接 下 来 我 们 束 从 目 己 的 双眼 入 手 ， 了 人 解 移 动 设备 的 视觉 体验 。 


4.3 移动 设备 的 视 铝 体验 


之 所 以 把 它们 称 作 “移动 设备 ， 除 了 便于 携 市 ， 更 主要 的 原因 残 是 能 够 在 移动 中 使 用 。 我 们 可 以 在 
行走 中 、 各 种 交通 工具 上 或 者 干 奇 百 怪 的 场合 中 使 用 它们 。 那 么 同时 ， 我 们 的 移动 应 用 也 面临 着 各 种 复杂 
环境 和 状态 的 考验 。 比 如 说 ， 在 行走 中 或 是 在 嗜 杂 的 环境 里 ， 我 们 的 注意 力 不 可 能 完全 放 在 你 的 移动 设备 
屏 吉 上 ， 我 们 精心 设计 的 、 序 满 各 种 细节 和 内 泣 的 界面 根本 没有 被 注意 到， 用 尸 们 匆匆 忙 忙 地 用 余 光 扫 视 
了 一 下 你 的 主页 后 ， 残 直 奔 目标 进入 主题 或 者 直接 退出 。 因 此 ， 我 们 有 必要 用 心 了 解 一 下 人 们 在 快速 扫 摘 
你 的 界面 时 的 视 部 规律， 更 加 小 心地 安排 界面 布局 ， 使 应 用 的 主题 和 视 况 元素 更 加 突出 ， 给 用 户 留 下 更 多 
的 视 党 印象 。 图 4-21 给 出 了 应 用 界面 在 运动 中 的 视觉 测试 结果 。 
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图 4-21 
应 用 的 界面 在 运动 中 的 视 竞 测试 


用 户 看 到 的 却 是 这 样 


4.3.1 视 冤 的 运行 轨迹 


你 了 解 自己 的 眼睛 吗 ? 当 我 们 打开 一 本 杂志 或 者 激活 一 个 网 页 进行 浏览 时 ， 有 眼球 在 扫描 这 个 页 面 时 是 
有 规律 的 。 随 着 科技 的 发 展 ， 这 个 规律 可 以 被 一 些 特殊 的 仪器 识别 并 记录 下 来 ， 这 就 是 “ 眼 动 仪 。2006 
年 4 月 ， 美 国 长 期 研究 网 站 可 用 性 的 著名 网 站 设计 师 杰 柯 柏 尼尔森 (Jakob Nielsen ) 友 表 了 一 项 眼 
球 轨迹 的 研究 ”的 报告 ( 原文 : F-Shaped Pattern For Reading Web Content )。 报 告 中 提出 ， 大 多 数 
情况 下 浏览 者 都 不 由 自主 地 以 “F “形状 的 模式 阅读 网 页 ， 这 种 基本 恒定 的 阅读 习惯 决定 了 网 页 呈现 F 形 
的 关注 热度 。 研 究 者 用 了 几 种 不 同 的 页 面 做 眼 动 仪 测试 ， 得 到 了 3 张 热度 图 〈 如 图 4-22 所 示 )， 用 颜色 
来 表示 浏览 者 眼光 聚集 的 热度 , 分 为 最 热 ( 红色 )、 较 热 ( 黄色 )、 不 热 ( 蓝 色 ) 和 基本 不 关注 (灰色 ) 4 种 。 


图 4-22 
眼 动 热度 图 
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虽然 杰 柯 相 : 尼尔森 人 研究 的 载体 是 网 页 或 传统 的 软件 界面 设计 ，, 但 是 对 我 们 移动 设备 的 用 户 体验 设计 ， 
尤其 是 平板 电脑 上 的 界面 设计 还 是 很 有 参考 价值 的 。 尽 管 这 个 研究 结果 对 界面 设计 的 实际 意义 还 存在 着 争 
议 ， 但 毕竟 从 人 体 测量 学 的 角度 上 同 我 们 揭示 了 人 类 眼球 的 运动 规律 和 习性 。 从 左 同 右 ， 从 上 到 下 ， 这 也 
是 传统 阅读 习惯 在 网 络 上 的 延伸 。 用 户 在 打开 应 用 的 界面 时 ， 都 会 有 一 个 明确 或 模糊 的 天 注 点 ， 和 而 眼球 在 
界面 上 扫 摘 时 融 是 在 寻找 这 个 天 注 点 。 当 友 现 类 似 信 息 后 ， 用 户 会 阅读 更 多 的 辅助 信息 以 帮助 决断 : 这 究 
竟 是 不 是 我 要 找 的 东西 ， 当 友 现 是 的 时 候 ,， 会 点 击 到 详情 页 面 ， 当 然 友 现 不 是 的 时 候 ， 歼 会 继续 同 下 阅读 ， 
循环 往复 。 用 户 的 耐心 是 有 限 展 的 ， 所 以 随 厦 扫 摘 的 进行 ， 页 面 长 度 的 拉 伸 ， 他 们 知 找 不 到 太 多 兴趣 点 ， 
兴趣 目 然 会 逐渐 消减 ， 因 此 残 可 能 形成 所 谓 的 F 型 或 者 金三角 执 区 。 

那么 ， 我 们 是 人 否 可 以 利用 这 个 规律 加 强 眼球 运动 的 流畅 感 ， 提 高 用 尸 的 视 完 体验 ， 从 而 突出 我 们 的 主 
题 呢 ? 我 们 可 以 看 到 ， 很 多 界面 布局 方式 都 可 以 达到 这 个 目的 。 

4-23 所 示 的 3 个 案例 都 采用 了 不 同 的 方式 有 意识 地 加 强 了 FF 型 的 视 沉 引导， 增强 了 用 户 在 浏览 
面 时 的 流畅 感 和 清晰 感 ， 从 而 有 效 地 加 强 了 用 户 体 验 质量 。 现 在 我 们 了 解 了 研究 眼睛 、 双 手 等 人 体 器 官 对 
提高 我 们 移动 应 用 用 尸体 验 设 计 的 重要 意义 ， 因 此 我 们 应 该 更 加 深入 地 研究 人 们 的 习惯 、 弱 点 甚至 偏执 ， 
来 优化 我 们 的 设计 。 
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4-23 Android 平 台 的 “TweetDeck”( 左 图 )、iOS 平 台 的 “Financial News”( 中 图 ) 和 Windows 
Phone 平台 的 “Esponce QR Reader”( 右 图 ) 


4.3.2 优化 视 锅 结构 

由 于 眼睛 在 生理 结构 上 的 特殊 性 ， 会 给 视觉 造成 很 多 困难 、 歧 义 或 者 错觉 ， 因 此 ， 我 们 要 充分 了 解 这 
些 视觉 常态 ， 在 尽量 避免 产生 错觉 的 同时 ， 优 化 界面 设计 的 造型 、 细 节 和 结构 ， 使 用 户 能 够 更 加 清晰 、 准 
确 和 顺畅 地 浏览 我 们 的 应 用 界面 。 下 面 我 们 列举 几 个 常见 的 优化 界面 视觉 结构 的 方法 。 
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1. 对 数字 进行 分 割 

我 们 的 应 用 难免 会 出 现 电 话 号 码 、 银 行 账号 或 日 期 时 间 这 样 的 长 串 数字 ， 面 对 见长 的 数字 列队 ， 无 论 
是 阅读 还 是 输入 ， 对 于 我 们 的 眼睛 来 说 ， 都 是 比较 吃力 的 ， 容 易 出 现 舌 错 。 为 了 万 便 浏 览 和 记忆 ， 我 们 一 
般 采 用 分 割 的 办 法 把 它们 分 成 多 个 部 分 。 

分 割 长 捉 数 子 有 两 种 万 法 ,一 个 是 应 用 界面 本 身 为 每 一 个 字段 提供 独立 的 输入 框 ， 这 样 不 但 缩短 了 
文字 输入 的 长 度 ， 降 低 了 阅读 的 难度 ， 还 能 防止 输入 错误 ， 这 一 般 在 网 页 和 电脑 软件 中 比较 多 见 ( 如 图 
4-24 左 图 所 示 )。 另 一 个 方法 是 在 用 户 输入 文字 的 过 程 中 应 用 自动 用 空格 或 者 分 隔 符 把 字段 隔 开 ， 它 的 优 
点 是 快速 、 直 观 而 且 阅 读 流畅 ， 这 也 是 移动 应 用 中 比较 常用 的 办 法 ( 如 图 4-24 石 图 所 示 )。 


i es 158-01 57-7739 
图 4-24 : [pp rx 


数字 的 分 割 万 陈 长 : [Gir Sn | 


于 上 | 2013 年 CT 月 人 5 日 本 天 1580157 1139 三 


2.“ 识 别 并 选择 ” 比 “ 回 忆 并 输入 ”要 容易 
在 面 对 各 种 选项 时 ， 我 们 应 该 尽量 使 用 户 在 一 个 沁 围 中 进行 选择 ， 而 不 是 强 担 用 户 回 忆 出 他 们 的 选项 
告诉 应 用 程序 。 选 择 会 更 加 容易 、 万 便 和 准确 ， 而 输入 则 相对 较 慢 且 容易 出 错 ， 因 此 ， 我 们 应 该 多 设计 
一 些 市 有 可 选 功能 的 控件 ， 只 有 在 极 特殊 或 万 不 得 已 的 情况 下 再 设置 文字 输入 框 〈《 如 关键 字 搜 索 )。 
从 图 4-25 中 可 以 看 到 ， 三 大 平台 在 录入 日 期 的 方式 上 是 完全 相同 的 ， 使 用 识别 并 选择 的 万 法 。 无 论 
从 操作 上 、 速 度 上 还 是 视 完 体验 的 美观 和 精确 度 上 ， 选 择 都 要 好 于 打字 输入 。 


2013 年 4 月 9 日 星期 二 


12:03 


23 。 2010 


4-25 三 大 平台 的 日 期 录入 
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3. 迎合 人 们 的 视 党 惯性 

我 们 的 应 用 界面 需要 各 种 图 形 特 效 的 宛 实 ， 比 如 浮雕 和 阴影 瓯 是 音 志 使 用 的 特效 ， 也 是 最 易 产 生 视 帝 
效果 的 图 形 样式 。 但 是 在 设置 这 两 个 特效 的 时 候 ， 要 注意 与 大 多 数 设计 师 以 及 用 户 的 视 苋 惯性 保持 一 致 。 
我 们 的 惯例 是 把 光源 设置 在 左上 角 , 也 残 是 对 于 “浮雕 效果 ”来 这 , 亮 部 在 左 侧 和 上 部 , 暗 面 在 右 侧 和 下 部 。 
如 果 反 过 来 ， 会 给 人 凹陷 而 不 是 凸 起 的 感觉 。 阴影 ”也 是 一 样 ， 出 现在 右 下 部 时 给 人 弹 起 的 感觉 ， 出 现 
在 左上 部 内 侧 时 给 人 按 下 的 效果 。 

通过 图 4-26 中 图 我 们 可 以 清晰 地 体会 到 这 些 视 党 上 的 惯性 给 人 们 市 来 的 印象 ， 臣 怕 没 有 人 会 观察 到 
巴 起 和 四 陷 这 两 个 图 形 效果 是 完全 一 样 的 ， 只 是 摆 放 的 方向 不 同 。 
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图 4-26 iOS 平台 的 “Le Ballon”( 左 图 ，51work6 产品 ) 和 “Word Crasher”( 右 图 ) 


4. 使 用 图 像 而 不 是 文字 来 描绘 信息 

人 们 识别 图 像 的 速度 要 远 远 超过 文字 ， 而 且 对 图 像 的 识别 还 会 触 友 相 关 信 息 的 回忆 。 因 此 ， 我 们 应 该 
尽量 使 用 图 像 来 描绘 信息 或 表达 功能 ， 比 如 缩 略 图 、 图 标 或 者 磁 贴 。 

图 4-27 中 的 3 款 应 用 展现 了 图 像 的 信息 传达 优势 。 Safari 是 iOS 平台 最 常用 的 网 页 浏览 器 ， 在 
页 面 切 换 功 能 里 ,设计 者 没有 使 用 常用 的 文字 列表 方式 进行 切换 ， 而 是 把 每 一 个 页 面 做 成 缩 略 图 ， 这 样 用 
户 在 查找 的 时 候 就 会 非常 直观 ， 无 需 阅读 文字 ， 赁 借 直观 的 视觉 印象 就 可 以 快速 打开 页 面 。Android 平台 
的 “Walkman ”也 是 同样 的 道理 ， 对 于 搜索 音乐 专辑 来 说 ， 封 面 图 像 远 远 比 文字 更 容易 被 人 注意 和 识别 |， 
从 美观 上 就 更 不 用 说 了 。Windows Phone 平台 的 “The Football App” 的 做 法 是 把 视频 中 的 截图 作为 图 
标 或 磁 贴 ， 不 但 增强 了 搜索 的 直观 性 和 速度 ， 还 可 以 根据 图 像 了 解 视频 的 内 容 。 
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iOS 平台 的 “Safari”( 左 图 )Android 平台 的 “Walkman ( 中 图 ) 和 Windows Phone 平台 的 “The Football App”( 右 图 ) 


黄金 分 割 ” 这 个 神奇 的 数字 可 以 适用 于 任何 的 艺术 和 设计 门类 ， 当 然 也 包括 应 用 的 界面 设计 。 在 分 
割 春 面 的 时 候 ， 我 们 完全 可 以 有 意识 地 按照 这 个 比例 进行 把 握 。 相 信 它 的 品味 和 美学 价值 吧 ， 肯 定 能 让 你 
的 界面 的 莒 体 视 竞 效果 增色 不 少 。 示 例 图 如 图 4-28 所 示 。 
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Android 平台 的 “Circle”( 左 图 )、iOS 平台 的 “Swackett”( 中 图 ) 和 Windows Phone 平台 的 “图 片 ”( 右 图 ) 


针对 界面 信息 丰富 或 屏幕 尺寸 较 大 的 平板 电脑 , 我 们 也 可 以 尝试 用 经 典 的 “ 井 ” 字 分 割 方法 确定 标题 、 
文字 和 图 片 的 位 置 ,避免 界面 松散 无 骨 杂乱 无 章 。 当 然 ,我 们 这 里 的 井 字 并 不 是 指 九 宫 格 式 的 界面 布局 ， 
而 是 一 种 使 界面 元 素 趋 于 规范 的 标尺 。 也 束 是 咬 ， 无 论 你 界面 上 的 元 素 多 么 丰 定 ， 排 列 多 么 复杂 ， 只 要 把 
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画面 上 的 元 素 控 照 横向 和 纵 同 的 三 等 分 去 填 宛 ， 融 会 使 用 户 在 视 竞 上 产生 平衡 和 稳定 的 感 竞 。 因 此 ， 这 种 
调整 视觉 结构 的 方法 也 被 称 为 “三 分 法 。 

从 图 4-29 中 ,我们 可 以 体会 到 “ 井 ，” 字 型 的 三 等 分 方法 对 界面 元 素 视 觉 上 的 平衡 起 到 的 作用 ， 同 时 
我 们 也 应 该 注意 到 保持 界面 视觉 稳定 和 平衡 的 重要 性 。 哩 然 对 于 初学 者 来 说 ， 这 个 概念 有 点 抽象 ， 但 是 对 
应 用 界面 整体 视觉 结构 的 把 握 ， 以 及 整体 与 细节 的 协调 和 统一 ， 都 是 设计 师 需 要 时 刻 用 心 调整 和 把 握 的 。 
在 之 后 的 草 三 中 ， 我 们 还 会 同 大 家 介绍 一 些 改善 界面 视觉 体验 的 经 验 和 方法 。 
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图 4-29 iOS 平台 的 “Expedia”( 左 图 ) 和 Android 平台 的 “Google Play Muisc”( 右 图 ) 


4.3.3 图 片 与 文字 的 视 党 关系 


在 上 一 节 里 ， 我 们 提 到 应 用 的 界面 应 尽量 使 用 图 像 来 摘 绘 信息 或 表达 功能 ， 文 子 的 识别 速 戎 不 如 图 片 
快 ， 同 时 在 视 锅 冲击 力 上 也 远 不 如 图 片 强烈 、 美 观 。 因 此 ， 我 们 应 尽量 多 地 使 用 图 片 、 照 片 以 及 图 标 等 图 
形 元 素来 宛 实 我 们 的 界面 。 而 文子 主要 作为 搭配 图 片 的 辅助 元 素 ， 对 图 片 进行 补 双 、 解 释 和 委 饰 。 

我 们 知道 ， 移 动 设备 上 的 应 用 要 适应 各 种 各 样 的 复杂 环境 和 状态 。 行走 中 ， 我 们 的 目光 或 注意 力 很 难 
完全 放 在 屏 需 上 ， 更 何况 设备 本 身 还 在 晃动 着 ， 因 此 图 片 传达 信息 的 优 瓜 殉 更 加 凸显 出 来 。 我 们 只 需要 轻 
轻 一 营 ， 残 可 以 看 清 图 片 的 大 体内 容 和 人 少量 的 细 万 ， 而 文子 则 需要 逐一 识别 后 才能 理解 。 不 过 ， 对 图 片 的 
选择 也 是 非 党 重要 的 ， 炉 糙 的 图 片 有 时 甚 全 还 不 如 文字 好 懂 。 和 那么 什么 样 的 图 片 能 够 增强 视 部 的 吸引 力 和 
表现 力 呢 ” 它 具 有 如 下 两 个 特征 。 

。 像素 要 大 。 当 然 ， 这 个 要 受到 界面 布局 和 屏 乾 大 小 的 限制 ， 这 里 我 们 是 捐 在 可 能 的 条 件 下 尽量 使 

图 片 放大 《 图标 和 磁 贴 除外 )。 
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量 选择 简单 、 干 净 并 清晰 的 特写 图 片 。 简 单 是 为 了 让 图 片 表达 的 内 容 更 直接 和 明确 ， 使 用 户 
能 够 集中 视 部 注意 力 而 不 航 咀 宾 和 革 主 。 干 将 和 清晰 是 为 了 使 图 片 更 美观 和 精致 ， 而 特写 是 为 了 让 
画面 有 一 个 能 够 吸引 眼球 的 视觉 中心 。 
图 4-30 中 的 三 款 应 用 在 图 片 处 理 上 非常 考究 ， 充 分 展现 了 图 片 的 表达 能 力 和 视 守 魅力。 同时， 标准 
的 特 与 照 厂 使 界面 的 主题 更 加 鲜明 。 


STRUM 


电气 下 
1% 
人 i | 
“ 
| t | 
有 各 a 


Ss srmulolyne Ajia om 
biriba Boautitu girls and its snowng 
NickNack Thoy we growmng up so tost 1 miss them 21) 


图 4-30 ”iOS 平台 的 “Strum”( 左 图 )Windows Phone 平台 的 “ProShot”( 右 上 ) 和 Android 平台 的 “Google Currents”( 右 下 ) 


当然 ， 在 正确 选择 和 处 理 图 片 的 同时 ， 也 不 能 忽视 对 文字 的 处 理 。 昌 然 文 字 在 视 党 上 没有 图 片 重要 ， 
但 它 表 达 合 义 清晰 、 准 确 且 全 面 的 特点 是 图 片 无 法 取代 的 。 那 么 ， 我 们 应 该 如 何 把 握 文字 元 素 的 视 客体 
验 呢 ? 

目 先 ， 我 们 要 尽量 避免 大 段 文 字 的 出 现 ， 和 人 简短 的 文字 才能 勾 起 用 尸 阅 读 的 欲望 ， 而 见长 的 文字 会 让 人 
感到 阅读 的 艰难 和 压力 。 

同时 ， 如 果 无 法 避免 出 现成 段 的 文字 ， 一 定 要 使 文字 行 的 长 度 〈 也 就 是 文字 块 横向 的 长 度 ) 短 一 些 ， 
哪怕 多 排列 几 行 ， 尽 量 使 它 成 为 块 状 的 文字 组 ， 而 不 是 大 片 的 文字 群 或 者 见长 的 文字 行 ， 最 好 把 它 也 变 像 
卢 一 样 的 块 状元 素 。 

而 且 ， 文 字 要 和 图 片 相 呼应 ， 尽 量 不 要 拆 立 ， 要 成 组 或 成 团 。 这 样 的 处 理 结 果 ， 能 使 文字 在 界面 里 变 
得 非常 活 ， 成 为 可 以 随意 搭配 和 把 放 的 图 形 元 素 。 

在 图 4-31 中 可 以 看 到 ，3 款 应 用 中 的 文字 元 素 都 非常 有 序 地 和 图 片 结合 企 了 一 起 ， 成 为 了 有 机 的 组 
合体 。 缺 少 了 文字 的 图 片 会 显得 很 音调， 而 依附 在 图 片上 的 文字 本 身 也 形成 了 非常 活跃 的 图 形 元 素 。 
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[ Er 


Radio Player 


© 


4-31 Windows Phone 平台 的 “Radio Lounge UK”( 左 图 ).iOS 平台 的 “AppAdvice”( 中 图 ) 和 Android 平台 的 “YouTube” 


( 右 图 ) 


4.4 ” 屏 若 的 旋转 


三 大 平台 的 移动 设备 都 有 一 个 相同 的 交互 特点 ， 那 丈 是 支持 屏 句 旋转。 任何 设备 都 有 模 屏 和 坚 屏 两 种 
显示 模式 ,而 且 可 以 通过 重力 感应 相互 旋转 切换 。 在 设计 应 用 界面 的 时 候 ,我 们 也 要 考虑 到 这 个 特点 。 当 然 ， 
并 不 是 所 有 的 应 用 都 非得 文 持 屏 索 旋转 。 

手机 上 的 应 用 默认 情况 下 是 以 竖 屏 模式 显示 的 ， 这 与 手 的 抓 握 万 式 有 关 。 所 以 ，iPhone 手机 的 时 面 
无 法 旋转 ， 但 是 有 些 手机 应 用 ( 主要 是 游戏 ) 由 于 需要 冯 手 操作 而 特意 设计 成 横 屏 模式 下 运行 。 平 板 电脑 
比较 特殊 ， 两 个 万 同 都 可 以 作为 默认 模式 ， 比 较 平等 ， 因 此 所 有 的 平板 电脑 的 扣 面 都 支持 转 屏 。 但 是 由 于 
双手 抓 握 比较 平稳 、 和 舒适 ， 所 以 平板 电脑 处 于 横 屏 模式 相对 多 一 些 ， 在 横 屏 模式 下 运行 的 应 用 也 比较 多 。 

那么 ， 在 设计 应 用 的 时 候 ， 如 果 需 要 支持 屏 帘 旋转 ， 情 况 束 会 复杂 得 多 。 要 想 让 你 的 应 用 界面 在 横 屏 
模式 和 坚 屏 模式 下 都 表现 优秀 ， 你 需要 做 很 多 工作 ， 考 虑 很 多 细 证 。 因 此 ， 我 们 可 以 观察 到 ， 大 部 分 的 应 
用 都 是 仪 支持 在 一 个 方 喇 上 的 屏幕 运行 。 为 支持 转 屏 的 应 用 设计 界面 ， 我 们 需要 把 一 个 方向 上 的 效果 ( 通 
常 是 竖 屏 ) 做 完美 之 后 再 考虑 另 一 个 方向 的 旋转 ， 因 为 界面 布局 、 按 钮 的 位 置 、 各 种 元 素 的 排列 以 及 每 一 
个 细 世 的 宽容 和 大 小 ， 都 需要 重新 调整 。 如 果 你 只 是 把 所 有 的 元 素 机 械 地 对 号 入 座 到 另 一 个 万 向 上 去 ， 会 
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显得 极 不 协调 、 不 伦 不 类 ， 还 不 如 不 旋转 呢 。 

从 图 4-32 中 可 以 看 到 ，Android 平台 上 的 “Google Music Play” 应 用 在 屏幕 旋转 之 后 发 生 了 很 大 
的 变化 。 首 先是 竖 屏 模式 下 的 列表 式 布局 在 横 屏 模式 下 变 得 非常 拥挤 ， 所 以 设计 师 果断 地 把 布局 变 成 陈列 
了 式 ， 从 视 竞 上 弥补 了 横 屏 的 不 足 。 其 次 是 由 于 横 屏 模式 下 上 下 空间 太 小 ， 所 以 上 面 的 状态 栏 和 下 面 正 在 播 
放 的 栏目 都 被 去 掉 了 。 通 过 这 个 例子 我 们 可 以 看 出 ， 屏 幕 的 旋转 过 程 绝 不 是 一 件 简单 、 机 械 的 工作 ， 而 是 
需要 非常 丰富 的 布局 和 界面 元 素 设 计 经 验 。 


4-32 Android 平台 上 “Goodgle Music Play” 的 竖 屏 显示 ( 左 图 ) 和 横 屏 显示 ( 右 图 ) 


我 们 还 需要 注意 的 一 点 融 是 ， 人 在 屏 顺从 竖 屏 到 模 屏 旋转 的 过 程 中 ， 很 多 元 素 会 被 压 局 。 这 个 情况 一 般 
出 现在 手机 设备 上 ， 因 为 手机 的 屏幕 比较 小 ， 所 以 垂直 空间 会 很 珍贵 ， 对 空间 的 挤 压 可 以 节约 出 很 多 的 空 
间 来 元 整 显 示 画 面 。 

从 图 4-33 中 可 以 看 出 ，iOS 平台 的 “Mail 应 用 在 屏幕 从 坚 屏 旋转 成 横 屏 后 导航 栏 的 高 度 从 44 所 
挤 压 成 32 点 。 当 然 ， 我 们 知道 在 iOS 平台 的 人 体 工程 学 规范 里 ，44 点 是 最 适合 点 击 的 大 小 ， 因 此 挤 压 
之 后 的 界面 势必 会 给 我 们 的 操作 市 来 一 些 困 难 ， 这 需要 设计 师 目 己 来 判断 和 取舍 。 

天 于 屏 替 的 旋转 ， 我 们 还 有 两 个 细 记 需要 提醒 大 家 。 一 个 是 文 持 屏 朝 旋 转 的 设计 决定 是 一 场 很 具 风 险 
的 赌局 ， 为 什么 这 么 况 呢 ? 因为 一 旦 你 选择 了 转 屏 ， 那 么 无 论 你 的 应 用 有 多 少 个 界面 ， 必 须 都 能 旋转 。 不 
能 有 的 能 转 有 的 不 能 转 ， 这 样 的 结果 会 把 用 户 搞 罕 的 。 因 此 , 我 们 必须 把 整个 应 用 的 全 部 细 古 考虑 清楚 后 ， 
再 决定 你 的 界面 是 否 需 要 支持 放 转 。 这 里 面 只 有 一 个 例外 ， 那 束 是 视频 播放 应 用 。 在 播放 视频 时 ， 大 家 是 
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可 以 接受 强制 使 用 横 屏 模式 观看 的 。 


44 点 〈88 像 素 ) 


Apple 12-10-12 
Your Apple ID was used to sign in to... 
Dear long, Your Apple ID (eorient@ 163.co0m) 
was Used to sign In to ICloud on an IPhon... 


Apple 12-9-27 
恒 Your Apple ID was used to sign in to... 
Dear lorg, Your Apple ID (leonaent@ 163.co0nm) 


路 件 箱 (57) 属 末 32 点 (64 像素 ) 


was Used to sign in to ICloud, and iessa,.， 
Apple Apple 13-3-20 
@ Your Apple ID was used to sign... Your recent download with your Apple ID y 
Dear long, Your Apple ID Dear long jia, Your Apple ID, eoriant@163.c50m, Was just used to 
(eorient@163.c0m) Was used to sign... download “First You Dream, Then You Die from the TV show Bates... 
DEVDIV.COM 12-8-7 bqpbjioc 13-3-17 
IDEVDIV.COM] Email 地 址 验证 ecrient 
Email 地 址 验证 jylidragon， 这 封 迟 是 由 > | 记 [ 此 一 时 ; 圳 整 下 本 后 是 这 芝 理 量 要 青云 .尘封 不 圳 ， 枫 械 改 畏 五 
DEVDIV COM 发 送 的 。 您 收 到 这 封 邮 人 忻 ，... 讽 四 美 用 动 硼 ， Pe 地 心 引力 对 雄关 足 不 安 昌 出 良 成 让 草 一 盘 梁 祝 糙 .. 
MOTODEV 12-7-27 Apple 13-2-26 
Upcoming Event: Migrating Your Leg... ~ Your recent download with your Apple ID 和 
Having trouble viewmng thrs email? Vieww it Dear long pa, Your Apple ID, eonent@ 16d.com, was Just used to 
ein 和 downiload Jobs for iOS from tha App Store on a computer or device... 


44 点 (88 像素 ) 更 新 于 13-4-7 15:35 


更 闲 于 全-4-25 2 5 32 点 ( 64 像 素 ) 


图 4-33 iOS 平台 的 “Mail 在 屏幕 旋转 后 导航 栏 的 高 度 被 挤 压 


男 一 个 需要 注意 的 细节 是 ， 并 不 是 所 有 人 都 会 尝试 施 转 你 的 应 用 ， 所 以 要 注意 ,不 要 把 重要 的 功能 
或 内 容 在 旋转 之 后 隐藏 擅 。 而 且 并 不 是 所 有 的 应 用 都 适合 转 屏 ， 有 时 刻章 地 旋转 会 使 用 户 迷 失 方 向 而 感 
到 了 奴 早 。 
解 了 移动 设备 的 使 用 万 法 和 交互 特点 后 ， 我 们 的 设计 将 进入 导航 和 控件 的 规范 化 调整 阶段 了 。 了 解 
和 掌握 规范 化 设计 方法 ， 是 所 有 移动 应 用 的 用 户 体 验 设计 师 的 必 经 之 路 ， 也 是 成 功 设计 完美 移动 应 用 的 捷 
径 。 只 有 擎 握 了 规 沁 我 们 才能 成 训 ， 理 解 了 原理 我 们 才能 创新 。 


第 5 章 
应 用 程序 导航 


不 知道 大 家 是 人 否 还 对 《格林 重 话 少 中 “糖果 屋 ”的 故事 有 印象 : 汉 汉 尔 与 格 莱 特 是 一 个 旬 穷 伐木 工人 
的 小 孩 。 由 于 害怕 食物 不 足 ， 伐 木工 的 妻子 ， 也 丈 是 两 个 孩子 的 继母 ， 详 服 木工 把 孩子 们 市 到 森林 里 ， 并 
将 他 们 遗弃 。 汉 泽 尔 与 格 羔 特 听 到 了 他 们 的 计划 ， 于 是 事先 收集 了 小 石 涉 ， 沿 途 揪 撤 ， 这 样 他 们 残 能 沿 小 
石头 找到 回 家 的 路 。 在 他 们 回来 后 ， 他 们 的 继母 再 度 说 服 木工 将 他 们 丢 在 森林 里 ， 不 过 这 次 他 们 沿路 布置 
的 是 面包 必 。 不 久 的 是 ， 面 包 履 被 森林 中 的 动物 吃 挥 了 ， 于 是 汉 泽 尔 与 格 业 特 在 森林 中 迷路 了 。 

小 石头 和 面包 屑 能 够 帮助 孩子 们 找到 “ 回 家 ”的 路 。 作 为 应 用 软件 设计 师 ， 我 们 同样 需要 考 
虑 到 用 户 在 使 用 你 的 应 用 时 ， 是 否 能 够 找到 “ 回 家 ”的 路 。 特 别 是 当 你 的 应 用 是 由 很 多 页 面 构成 的 时 候 ， 
用 户 为 了 完成 染 项 功能 或 任务 ,需要 在 这 些 界面 中 游 心 , 如 果 没 有 清晰 的 导航 设计 , 他 们 会 很 容易 “迷路”， 
无 法 妈 回 到 目 己 出 友 的 页 面 里 。 合理 而 科学 的 导航 设计 在 用 尸体 验 设计 中 非常 重要 ， 在 交互 设计 中 也 是 比 
较 重 要 的 环节 。 

在 Web 网 页 设计 中 ， 为 了 防止 用 户 在 浏览 网 页 时 迷失 在 众多 网 页 中 ， 会 采用 一 种 岂 做 “面包 履 导 航 - 
的 设计 方式 ， 这 个 命名 就 来 源 于 “糖果 屋 ” 的 故事 。 目 前 ， 面 包 必 导航 在 移动 应 用 设计 中 是 非常 重要 的 导 
航模 式 。 本 划 中 ， 我 们 将 同 大 家 介绍 三 大 平台 应 用 独特 的 导航 模式 。 


5.1 iOS 应 用 的 导航 模式 


这 里 我 们 首先 给 大 家 介绍 的 是 iOS 平台 设备 的 导航 模型 。 无 论 是 电脑 上 的 Mac OS X 操作 系统 还 是 
移动 设备 的 iOS 操作 平台 ， 尼 们 的 导航 设计 都 非 溃 优秀 。 对 于 设计 师 ， 羊 果 公 司 给 出 了 一 整套 设计 规 泄 ， 
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要 求 开 友 人 员 在 设计 应 用 时 遵守 这 些 规范 。 这 个 规范 就 是 我 们 在 第 1 章 结尾 提 到 的 《iOS 人 机 界面 指南 》 
WOS Human Interface Guidelines )， 它 是 我 们 设计 iOS 应 用 的 指导 纲领 。 
IOS 应 用 可 选择 的 导航 模式 有 如 下 3 种 。 
。 平 铺 导航 模式 。 这 种 导航 在 应 用 的 内 容 组 织 上 没有 层次 关系 ， 需 要 展示 的 内 容 都 放置 在 同一 个 大 
屏幕 上 ， 采 用 分 屏 或 分 页 进行 导航 ， 可 以 左右 或 者 上 下 滑动 屏幕 ， 查 看 内 容 。 
。 标签 导航 模式 。 这 种 导航 把 应 用 的 内 容 分 别 放置 在 几 个 功能 模块 里 ， 每 个 功能 模块 之 间 没 有 关联 。 
通过 点 击 标签 实现 各 个 功能 模块 的 切换 ， 达 到 管理 功能 模块 的 作用 。 
。 树 形 结构 导航 模式 。 这 也 是 我 们 之 前 提 到 的 面包 屑 导航 模式 。 应 用 的 内 容 是 有 层次 的 ， 从 上 到 下 
是 分 类 包含 的 关系。 例如 ， 黑 龙 江 省 与 哈尔滨 市 的 关系 ， 黑 龙 江 省 包含 了 哈尔滨 市 ， 哈 尔 滨 市 又 
包含 了 道里 区 和 道外 区 。 


5.1.1 和 平 铺 导 般 


平 铺 导 航 一 般 应 用 于 扁平 化 信息 和 任务 的 导航 。 所 谓 扁 平 化 信息 ， 就 是 指 这 些 信息 之 间 没 有 从 属 的 层 
级 关系 。 在 iOS 应 用 中 ， 平 铺 导航 模式 主要 有 两 种 实现 方式 : 分 屏 控 件 ( UlIPageControl ) 和 分 页 控件 
( UlPageViewController )。 

1. 分 屏 控件 的 导航 实现 

分 屏 控件 是 iOS 标准 控件 ， 它 的 主要 作用 就 是 将 一 个 大 的 屏幕 分 成 几 个 小 的 标准 屏幕 来 显示 。 一 般 
情况 下 ， 会 在 屏幕 下 面 出现 一 排 小 圆 点 。 如 果 分 成 3 个 屏幕 ， 就 会 显示 3 个 小 圆 点 ， 其 中 高 亮 显示 的 小 点 
是 当前 屏幕 ， 如 图 5-1 所 示 。 


全 让 5-1 


基于 分 屏 控件 的 导航 


操作 分 屏 控 件 的 手势 有 两 种 ， 一 种 是 点 击 小 圆 点 的 左 侧 (上边 ) 或 右 侧 (下边 ) 实现 翻 屏 ， 另 一 种 是 
用 手 在 屏幕 上 滑动 实现 翻 屏 。 小 圆 点 应 该 限制 在 20 个 以 内 ， 超 过 20 个 就 会 溢出 。 事实 上 ， 如 果 一 个 应 
用 超过 10 个 屏 帘 ， 骨 使 用 平 铺 负 面 导 航模 式 束 不 是 很 万 便 了 ， 此 时 从 第 一 个 屏 夫 翻 到 最 后 一 个 屏 营 是 件 
很 竹本 的 事情 ， 

分 屏 控件 导航 在 很 多 应 用 中 被 采用 ， 单 用 于 实用 型 应 用 程序 构建 。 实 用 型 应 用 程序 完成 的 任务 相对 简 
里 ， 对 用 户 输入 要 求 很 低 。 用 户 使 用 实用 型 应 用 程序 ， 通 单 是 为 了 快速 得 看 信息 摘要 或 是 在 少数 对 旬 上 执 
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行 简 单 任 务 。iPhone 自 带 的 “天 气 ” 应 用 就 是 一 个 典型 的 实用 型 应 用 程序 ， 它 显示 了 一 些 简 单 明 了 的 摘 
要 信息 。 页 面 信息 分 为 “正面 ”和 “背面 ”两 个 界面 ， 正 面 采 用 分 屏 控件 导航 (如 图 5-2 左 图 所 示 )， 而 
背面 一 般 用 来 对 应 用 进行 设置 ( 如 图 5-2 右 图 所 示 )。 


加 北京 
@ 上 海 市 
加 哈尔滨 
因 广州 


图 5-2 
天 气 ， 应 用 页 面 的 正面 
( 左 图 ) 和 背面 ( 右 图 ) 


从 页 面 正面 进入 背 过 轻 点 右 下 角 的 “i ”按钮 实现 的 。"i 按钮 是 iOS 平台 进入 设置 界面 的 默 
认 万 式 ， 它 的 存在 暗示 用 户 可 以 对 应 用 进行 一 些 设置 。 当 然 ， 你 也 可 以 采用 更 加 生动 和 形象 的 上 暗示， 比如 
在 iPhone 目 市 的 “地 图 ”应 用 中 ,页 面 的 右 下 角 被 疮 起 暗示 用 户 去 揭 开 它 。 抓 开 页 面 后 ,露出 隐藏 的 界面 ， 
从 中 可 以 设置 地 图 的 相关 信息 ( 如 图 5-3 所 示 )。 


5-3 
iOS 平台 的 “地 图 ”应 用 
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大 家 可 能 注意 到 了 ,， 地 图 ”应 用 没有 采用 分 屏 控件 ， 原 因 是 所 有 的 信息 都 放置 在 一 个 可 任意 缩放 的 
屏幕 中 ， 这 样 束 无 需 米 用 分 屏 控 件 了 。 
2. 分 页 控件 的 导航 实现 
在 iOS 5 之 后 ， 系 统 增 加 了 UIPageViewController 控制 器 ， 它 主要 用 于 电子 书 和 电子 杂志 的 导航 ， 
是 实现 平 铺 导航 的 一 种 方式。 分 页 控件 导航 除了 应 用 于 电子 书 和 电子 杂志 外 ， 也 可 以 用 于 普通 移动 应 用 
的 导航 ， 其 特点 是 以 翻 书 的 动画 效果 呈现 页 面 跳 转 。 图 5-4 所 示 的 是 iPhone 上 “iBooks” 应 用 里 电子 
书 的 界面 。 


书库 ” 演 -i 
ETI 画 站 间 

Wyou have a lot of spps, you might wank to 

use Sposlight vo locate and open them. See 

Searching. 

Scrolling 


Drag vp of down to scroll, On some screens 
To rerurn to the Home sereen, peess the 


Heewe bution O apain, 


such as webpapes, You can also scroll side to 
side, Drapgpiag your Singer 10 scroll doesm't 


View recemly us0d apps: Double-cbck the choose cg activate amything on the screen 


Hieeoe bution 口 yo reveal the makitasking 


bar, 
Tap an oP to vse Wl again, Swipe left to wee 
more 本 Ps 
i * 
4TV4TS 473 
im - mw 用 


图 5-4 iOS 平台 上 “iBooks” 应 用 中 阅读 iPad User Guide 电子 书 的 界面 


电子 书 的 导航 采用 了 分 页 控件 万 式 ， 用 户 可 以 像 翻 书 一 样 在 页 面 乙 司 跳 转 。 分 页 控件 导航 也 需要 一 些 
辅助 功能 按钮 ， 这 泽 按 钮 一 般 放 置 于 界面 项 部 。 当 然 ， 如 果 需 要 ， 可 以 隐藏 这 些 按钮 。 

此 外 ， 分 页 控件 还 可 以 设置 双 页 显示 ， 图 5-5 所 示 的 是 iPad 上 的 “iBooks 应 用 在 横 屏 情况 下 阅 
读 电 子 书 的 界面 。 
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图 5-5 iPad 上 的 “iBooks” 应 用 在 阅读 iPad User Guide 电子 书 的 界面 
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在 iPad 横 屏 的 情况 下 ， 分 页 控件 采用 左 石 双 页 显示 ， 这 样 可 以 提升 用 户 体验 ， 融 像 在 看 真 的 书 一 样 。 
在 页 面 翻动 的 过 程 中 ， 用 户 还 可 以 看 到 下 一 页 的 内 容 ， 这 泽 功 能 和 特效 都 是 由 分 页 控件 本 身 提供 的 。 

平 铺 导 航 也 有 它 的 弊端 ， 主 要 是 页 面 之 间 的 直接 切换 不 方便 。 为 此 ， 有 的 应 用 会 添加 一 些 辅助 工具 
栏 ， 在 “iBooks ”应 用 中 ， 在 页 面 下 部 添加 了 可 以 拖 动 的 滑 块 ， 通 过 拖 岛 滑 块 可 以 快速 在 页 面 之 间 切 换 ， 
如 图 5-6 所 示 。 


See the status of a print job: Double-click 
the Home button OO), then tap Print Center 
in the multitasking bar. The badge on the 
icon shows how many documents are ready 
to print, including the current one. 


图 5-6 ”页面 之 间 和 直接 切换 


5.1.2 iOS 的 标签 导 般 

由 于 平 铺 导航 在 页 面 乙 间 直 接 切 换 不 是 很 万 便 ， 内 容 层次 结构 也 比较 简单 ， 所 以 对 于 功能 或 信息 较 丰 
曙 的 应 用 ， 我 们 可 以 矢 试 使 用 标签 导航 。 在 标签 导航 里 ， 每 个 标 党 表 代表 一 个 功能 模块 ， 各 功能 模块 乙 间 
是 相对 独立 的 。 下 面 我 们 来 看 看 iPhone 中 自 市 的 “时 钟 ”应 用 ， 如 图 5-7 所 示 。 
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图 5-7 iPhone 上 的 “时 钟 ” 应 用 


在 这 个 应 用 界面 上 ， 共 有 4 个 标签 : 世界 时 钟 、 立 钟 、 秒 表 和 计时 器 。 每 个 标 等 对 应 的 功能 都 与 时 钟 
有 天， 但 是 它们 彼此 之 间 互 相 独 立 、 各 不 相干 。 

在 标签 导航 模式 里 ， 苹 果 公 司 对 于 标签 栏 的 使 用 有 一 些 指导 性 的 原则 : 首先 ， 标 签 栏 应 该 位 于 屏 适 的 
下 万 ， 占 有 49 点 的 高 度 的 屏 适 空间， 有 时 可 以 隐 藏 起 来 ， 同 时 ， 为 了 点 击 万 便 ， 标 签 栏 中 的 标签 不 能 超 
过 5 个 ， 如 果 需 要 分 类 的 项 目 较 多 ， 可 把 最 后 一 个 标签 设置 成 “更 多 ， 这 样 可 以 通过 扎 击 “更 多 ”标签 
展现 更 多 的 列表 ， 如 图 5-8 所 示 。 


图 5-8 
iPhone 上 的 “音乐 ”应 用 


+ 有 J 相国 


_ 前 这 天 表 。 甫 消 者 可 辣 专 转 更 站 | 


5-9 是 iPad 上 的 App Store 应 用 ， 从 中 可 以 看 到 iPad 下 标签 导航 模式 的 使 用 。 由 于 屏幕 尺寸 要 
比 iPhone 大 得 多 ， 所 以 在 iPad 下 标签 栏 中 的 标签 可 以 超过 5 个 的 限制 。 
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Editors CPoiCe 


Wy HALFIONEZ 


5-9 
iPad 上 的 App Store 应 用 


and Noteworthy 


New to the App Store] 


无 论 是 iPhone 还 是 iPad， 标 签 导 航模 式 使 用 的 控件 必须 是 标签 


$ 栏 ( UITabBar )， 但 是 这 个 规 
则 也 并 非 一 成 不 变 的 ，iOS 6 版 本 的 iPad“ 时 钟 ” 应 用 就 采用 了 工具 栏 (UIToolbar) 和 分 段 控 件 


( UlSegmentedControl ) 体现 标签 导航 模式 ， 如 图 5-10 所 示 。 


5-10 
iPad 上 的 “时 钟 ”应 用 


在 工具 栏 中 ， 我 们 可 以 放置 很 多 控件 
直接 快速 


。 信 助 这 分 段 控件 放 在 工具 栏 中 ， 起 到 
束 切 换 界 面 的 作用 。 关 于 工具 栏 和 分 段 控 件 ， 我 们 会 在 下 一 章 里 详细 介绍 。 


一 特性 ， 我 们 可 以 将 一 个 4 


5.1.3 iOS 的 树 形 结构 导航 


上 面 介 绍 的 标签 导航 只 能 摘 ) 


一 月 


述 两 个 层级 的 信息 ， 如 果 用 来 摘 述 行政 地 区 的 话 ， 只 能 摘 述 
如 采 需 要 摘 述 更 加 深层 的 信息 


术 省 和 市 。 但 是 
， 如 和 省、 市 、 县 、 乡 等 ， 标 等 导航 融 有 些 困 难 了 


， 这 种 情况 下 我 们 可 以 采用 
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树 形 结构 导航 模式 。 从 理论 上 说 ， 树 形 结构 导航 层次 可 以 无 限 深 ,但 是 我 们 建议 不 要 超过 4 层 ， 如 果 超 过 
了 4 层 ， 融 得 采用 其 他 办 法 解决 。 

树 形 结构 导航 模式 将 导航 视图 控制 器 ( UINavigationController ) 与 表 视 图 结合 在 一 起 ， 主 要 用 于 构 
建 有 从 属 关系 的 导航 。 分 层 组 织 信息 的 方式 可 以 帮助 我 们 构建 效率 型 应 用 程序 。 效 率 型 应 用 程序 具有 组 织 
和 操作 具体 信息 的 功能 ， 通 常用 于 完成 比较 重要 的 任务 。 例 如 ，iOS 的 “相册 ”应 用 就 是 效率 型 应 用 程序 
的 典型 例子 。 

图 5-11 展现 的 是 iPhone 上 的 “邮件 ”应 用 ， 它 采用 的 就 是 树 形 结构 导航 ， 所 有 界面 的 顶部 都 有 一 
个 导航 栏 , 第 一 个 界面 是 树 形 结构 的 “ 树 根 ,我 们 称 之 为 “ 根 视图 ;第 二 个 界面 是 二 级 视图 ,也 就 是 树干 
第 三 个 界面 是 三 级 视图 ， 也 就 是 “树叶 。 树 根 “和 “树干 ”采用 表 视 图 ， 因 为 表 视 图 在 分 层 组 织 信息 方 
面 的 优势 很 突出 。 树干 ”理论 上 来 讲 可 以 有 很 多 级 ， 但 是 最 好 不 要 太 多 ， 树叶 ”一 般 是 一 个 平 铺 的 视图 ， 
它 能 够 达到 具体 展示 的 作用 。 
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图 5-11 iPhone 上 的 “邮件 ”应 用 


我 们 可 以 为 “ 根 视图 ”的 导航 栏 添加 左右 按钮 ， 但 是 二 级 和 三 级 视图 的 左 按钮 是 由 导航 控制 器 自己 添 
加 的 , 它 残 是 我 们 布置 在 路 上 的 “面包 局 ， 我 们 无 法 目 己 定义 这 个 按钮 ， 人 否则 用 户 融会 在 你 的 应 用 中 迷路 。 
这 也 造成 了 树 形 结构 导航 的 瑟 点 ， 那 束 是 你 怎样 进来 ， 丈 得 怎样 按 原 路 返回 。 这 束 不 如 标签 导航 万 便 ， 
为 标签 导航 可 以 很 快 地 在 各 个 模块 之 则 切换 。 

树 形 结构 导航 在 iPhone 和 iPad 设备 下 的 展示 方式 有 很 大 区 别 。 图 5- 12 所 示 的 是 iPad 自 市 的 邮 
件 ” 应 用 的 横 屏 显示 模式 。 由 于 iPad 屏幕 比较 大 , 横 屏 模式 下 会 分 栏 显 示 , 使 用 的 控件 是 “分 栏 视图 。 
这 种 “分 栏 视图 ”是 iPad 特有 的 视图 ， 专 为 树 形 结构 导航 而 设计 的 ， 它 不 需要 界面 的 切换 就 可 以 展示 


更 多 的 信息 。 
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在 iPad 横 屏 模式 下 ， 分 栏 视图 把 屏幕 分 割 为 左右 两 个 视图 , 右 侧 是 DetailView ,负责 显示 详细 信息 ; 
左 侧 是 MasterView， 里 面 有 一 个 导航 列表 ， 用 于 为 右 侧 的 DetailView 导航 。MasterView 的 导航 列表 
占有 320 点 的 固定 大 小 。 在 竖 屏 模式 下 ，MasterView 会 隐藏 起 来 。 图 5-13 左 图 展示 了 “邮件 ”应 用 的 
坚 屏 显示 模式 ， 此 时 MasterView 视图 被 隐藏 起 来 ， 要 想 显 示 它 ， 需 要 点 击 左 上 角 的 “ 收 件 箱 ”按钮 〈 如 
5-13 右 图 所 示 )。 我 们 会 发 现 展开 的 MasterView 视图 是 漂浮 在 DetailView 视图 上 的 ， 这 种 形式 的 视 
图 叫做 “浮动 层 ( popover )， 它 经 常 出 现 于 iPad 中 用 来 作为 内 容 视图 。 


A 环 轩 习 科 TT EE 


二 Do 请 量 这 可 ,1 月 二 日， 有 pas 香 刷 本 和 日 ， 自 直 一 日 ， et ep 于 和 看 。 必 二 一 旧 
Liri edin 1 
Thi EL ES a EL 


Teli Il- 
pp Po ree Febernh oa 


新 灵 迎 门 , 好 礼 满门 CT ES ， 半 寺 | 漠 站 
图 5—1 3 . Rr 
iPad 上 “邮件 ”应 用 的 fi re 
怪 屏 显示 模式 5 [ri ws 如 


ee 


一 


Ai a 
he 来 地 羡 . i 


Lr din Trainy PHI 


和 本 Oroup... i113 
MOD Fw eeeg 


103 


104 


品味 移动 设计 一 一 :OS、Android、Windows Phone 用 户 体验 设计 最 佳 实践 


5.1.4 模 态 视图 


在 导航 过 程 中 ， 有 的 时 候 需 要 暂时 放弃 主要 任务 转 而 去 做 一 些 次 要 任务 。 完 成 次 要 任务 之 后 ， 要 再 加 
到 主要 任务 上 。 这 个 次 要 任务 束 是 在 模仿 视图 中 完成 的 。 图 5- 14 是 模 态 视图 示意 图 ,从 中 可 以 看 到 ， 
主要 任务 是 “接收 邮件 一 “查看 邮件 ,在 这 个 过 程 中 用 户 很 有 可 能 需要 撰写 新 的 邮件 ,此 时 “ 拉 写 邮件 
束 成 了 次 要 任务 , 当 用 户 把 邮件 撰写 完成 后 , 残 会 关闭 新 邮件 视图 , 回 到 查看 邮件 视图 继续 进行 主要 任务 。 


主要 任务 (查看 邮件 ) -=----- 


次 要 任务 ( 措 写 邮件 ) -~ -《。” 撞 写 邮件 )--》> 


图 5-14 模 态 视图 示意 图 


模 态 视图 默认 情况 下 从 屏幕 下 方 滑 出 来 。 完 成 任务 后 ， 需 要 关闭 这 个 模 态 视图 ， 如 果 不 关闭 就 无 法 做 
别 的 事情 ， 这 就 是 “ 模 态 ”的 含义 。 它 有 必须 响应 和 处 理 的 意思 。 因 此 ， 模 态 视图 中 一 定 会 有 确定 任务 或 
取消 任务 两 个 按钮 ， 因 为 iOS 只 有 一 个 “Home” 键 。Android 和 Window Phone 上 的 应 用 就 不 会 遇 到 
这 些 问 题 ， 因 为 它们 可 以 通过 设备 上 的 “返回 ” 键 关闭 视图 。 


图 5-15 展示 的 是 iPhone 上 的 “邮件 应 用 ， 点 击 左 图 中 的 书写 按 和 ， 殊 会 弹出 厂 图 所 示 的 新 
邮件 视图 。 
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四 SS=15 
iPhone 上 的 “邮件 ”应 用 呈现 的 
模 态 视图 
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iPad 与 iPhone 呈现 的 模 态 视图 有 所 不 同 。iPadg 应 用 可 以 有 4 种 呈现 模 态 视图 的 形式 : Ful 
Screen、Page Sheet、Form Sheet 和 Current Context。 下 面 简要 介绍 这 4 种 形式 。 

。 Full Screen 。 全 屏 状 态 ， 它 为 默认 呈现 的 样式 。 在 iPhone 上 ， 只 能 全 屏 呈 现 。 

。 Page Sheet。 模 态 视图 的 宽度 是 固定 的 768 点 ， 因 此 ， 在 iPad 的 横 屏 模式 下 ， 会 按照 图 5-16 
左 图 显示 ， 而 在 坚 屏 模式 下 则 全 屏 呈 现 ( 如 图 5-16 右 图 所 示 )。 

。 Form Sheet。 模 态 视图 是 固定 的 540 x 620 点 。 无 论 是 横 屏 还 是 坚 屏 情况 下 ， 呈 现 尺 十 都 不 会 
有 变化 。 

。 Current Context。 模 仿 视 图 与 父 视 图 控制 器 的 呈现 方式 相同 。 


新 包 什 


疾 自 种 的 iPad 


发 自我 的 iPad 


图 5-16 iPad 上 的 “邮件 应 用 


5.1.5 iOS 的 组 合 导 航 


前 面 提 到 的 3 种 导航 模式 并 不 一 定 拆 立 使 用 ， 有 时 可 根据 用 户 的 需求 组 合 使 用 。 图 5-17 展示 的 
Nike+ 应 用 是 一 款 针 对 运动 爱好 者 的 iPhone 应 用 。 这 个 应 用 采用 了 标签 导航 和 树 形 结构 导航 相 结 合 的 
万 陈 。 我 们 看 到 ，3 个 标签 可 导航 进入 3 个 不 同 的 模块 ， 在 每 个 模块 的 内 部 又 采用 了 树 形 结构 的 导航 ， 层 
次 深度 为 3 层 。 
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播放 列表 


OE 开放 式 体育 所 炼 
小 播放 列表 25 大 金曲 榜 
回 岂 


要 十 了 目 本 时 间 的 体育 训 随机 播放 歌曲 


A 
距离 目标 距离 的 体育 巾 炼 


1 ? 


图 5-17 iPhone 上 的 “Nike+” 应 用 


在 图 5-18 里 可 以 看 到 ， 在 第 二 个 标签 “我 的 体育 锻炼 ” 里， 我们 可 以 添加 体育 锻炼 项 目 ， 这 个 添加 
界面 就 是 采用 模 态 视图 的 方式 呈现 的 。 


我 的 体育 锻炼 6 r+) 


a 


ee 


_ 设 定 了 目标 距离 的 体育 钱 体 图 5-18 


iPhone 上 “Nike+” 应 用 的 模 态 视图 


-eR 


5.2 Android 应 用 导航 模式 


由 于 公司 理念 的 不 同 ， 谷 歌 公 司 没 有 像 苹果 公司 那样 对 Android 应 用 进行 严格 的 规范 和 审核 。 因 
此 ， 无 论 是 布局 方式 还 是 导航 方式 ，Android 应 用 都 可 以 说 是 “百花 并 放 。 直 到 谷歌 推出 Android 3 之 
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后 ， 才 出 台 了 一 些 用 户 体验 设计 指导 原则 。 最 终 在 Android 4 之 后 ， 终 于 推出 了 一 套 完整 的 带 有 自己 鲜明 
个 性 的 设计 规范 。 本 节 归 纳 了 Android 4 之 后 的 一 些 导 航模 式 ， 因 此 ， 如 果 不 做 特殊 说 明 ， 本 节 所 涉及 的 
Android 版 本 均 为 4.x。 

Android 应 用 的 导航 模式 分 为 两 种 : 标签 导航 和 树 形 结构 导航 。 


5.2.1 Android 的 标签 导航 


Android 的 标签 导航 模式 同时 包含 了 iOS 应 用 中 平 铺 导航 和 标签 导航 的 特点 ， 既 可 以 左右 滑动 屏幕 
切换 界面 ， 又 可 以 点 击 每 个 界面 上 的 标签 快速 切换 界面 。 不 过 ， 这 里 的 标签 与 1OS 中 的 标签 不 同 , IOS 中 
的 标签 主要 用 于 不 同 的 功能 模块 切换 ， 而 Android 中 的 标签 主 要 用 于 不 同 界面 之 间 的 切换 ， 前 者 关注 的 是 
全 局 ， 而 后 者 关注 的 是 局 部 。 

图 5-19 展示 的 是 Android 自 带 的 拨号 应 用 ， 这 个 应 用 采用 标签 导航 模式 。 应 用 主要 包含 3 个 与 拨 
打 电 话 相 天 的 界面 ， 黔 认 显 示 的 界面 是 电话 拨号 界面 ， 当 前 界面 的 标签 下 会 有 一 个 监 色 的 粗 横 线 。 


010 8077 632 


5-19 Android 自 带 的 拨号 应 用 


拨号 应 用 中 的 3 个 操作 任务 〈 电 话 拨号 、 最 近 呼 叫 和 经 常 呼叫 的 联系 人 ) 是 局 平 化 的 , 没有 层次 结构 。 
如 果 需 要 摘 述 两 层 深 度 的 信息 ， 也 可 以 采用 标签 导航 模式 。 图 5-20 所 示 的 是 Andrew Neal 公司 开 友 的 
Apollo ”音乐 播放 器 , 该 应 用 的 一 级 视图 包含 了 6 个 界面 ( 最 近 、 艺 术 家 、 专辑、 歌曲、 播放 列表 和 流派 )， 
它们 可 以 通过 标签 导航 相互 切换 。 
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图 5-20 Android 上 “Apollo” 音 乐 播放 器 的 一 级 视图 


5-21 所 示 的 是 “Apollo ”应 用 从 一 级 视图 进入 到 了 二 级 视图 。 左 图 的 流派 视图 为 
Jazz 进入 了 Jazz 风格 的 音乐 列表 ， 在 二 级 视图 中 我 们 可 以 对 音乐 进行 一 些 处 理 。 


了 [= 


驻 曲 播放 列 机 恋 党 
上 "pr ULLU 
BAlternative | | 
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Airegin | 
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人 
图 5-21 
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Miles Cavis 进入 二 级 视图 
All Through The Day 
Other | | | 加 
Les Brown 
和 | Autumn Leaves | 
op a Cannonball Adderley 
7 ¥ OQ : sr cncx BERAY PP A | 
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如 果 想 返回 到 前 一 个 视图 呢 ? 这 叉 涉及 本 章 开始 时 提 到 的 “面包 必 ”导航 。 在 iOS 里 ， 我 们 可 以 通 


过 导航 栏 左边 的 


安 钮 ( 如 图 5-22 所 示 ) 返 回 前 一 个 视图 。 而 在 Android 中 也 有 类 似 控件 ,如 图 5-23 所 示 ， 
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点 击 操作 栏 左边 的 向 上 按钮 《 可 以 返回 到 前 一 个 视图 。 同 时 ， 也 可 以 通过 选择 如 图 5-24 所 示 的 返回 按钮 
也 汪 反 回 前 一 个 视图 。 向 上 按钮 与 返回 按钮 有 一 些 区 别 ， 前 者 只 能 返回 同一 个 应 用 中 的 上 一 个 视图 ， 不 能 
出 现在 “ 根 视图 ”中 ,而 后 者 没有 这 个 限制 ,这 在 第 4 章 中 介绍 过 , 它 可 以 连续 返回 直到 设备 的 主屏 。 此 外 ， 
返回 按钮 还 可 以 关闭 菜单 、 对 话 框 以 及 进行 取消 操作 。 


5-22 iOS 导航 栏 


《 Jazz 


图 5-23 Android 操作 栏 


图 5-24 Android 导航 栏 


操作 栏 在 Android 应 用 导航 中 用 得 最 多 ， 它 也 是 极其 复杂 的 控件 ， 能 完成 应 用 中 大 部 分 的 导航 任务 。 
5-22、 图 5-23 和 图 5-24 中 的 标 等 也 属于 操作 栏 的 一 部 分 。 天 于 操作 栏 ， 我 们 会 在 之 后 的 内 容 里 更 
加 深入 地 介绍 。 


5.2.2 Android 的 树 形 结构 导航 


Android 树 形 结构 导航 模式 与 iOS 中 的 树 形 结构 导航 模式 的 功能 相同 ， 但 是 风格 和 形式 上 有 很 大 的 
差别 ， 前 者 主要 通过 操作 栏 和 列表 控件 ( ListView ) 来 实现 。 

5-25 是 Android 手机 目 市 的 电子 邮件 应 用 , 这 个 应 用 玉 用 了 深层 信息 导航 模式 , 左 图 为 一 级 视图 ， 
摘 述 应 用 中 弟 用 的 文件 夹 ， 但 它 不 是 主 界面 ， 所 以 会 有 一 个 同上 按钮 。 中 图 为 收 件 箱 二 级 视图 ， 它 才 是 主 
界面 ， 是 用 户 进 入 应 用 看 到 的 界面 ， 这 样 设计 是 因为 收 件 箱 视 图 相对 文件 夹 更 单 用 。 石 图 是 参看 邮件 三 级 
视图 ， 用 户 可 以 在 这 个 视图 中 进行 转 友和 删除 邮件 等 操作 。 

Android 树 形 结构 导航 的 缺点 与 iDS 是 一 样 的 ， 在 二 级 、 三 级 这 些 子 视 图 之 间 切 换 很 麻烦 ， 必 须 逐 
级 返回 到 一 级 视图 ,再 逐 级 进入 到 其 他 子 视图 ,在 iOS 树 形 结构 导航 中 ,苹果 官 万 没有 给 出 有 效 的 解决 方案 。 
而 Android 却 有 比较 好 的 解决 方案 ,在 操作 栏 控件 中 可 以 添加 下 拉 列 表 ( Spinner ) 控 件 ( 如 图 5-26 所 示 )， 
通过 该 控件 可 以 直接 切换 到 其 他 子 视 图 。 
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图 5-25 Android 手机 自 市 的 电子 邮件 应 用 
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5.2.3 手机 与 平板 电脑 导航 的 不 同 


Android 平板 电脑 上 的 应 用 大 多 采用 横 屏 模式 设计 。 图 5-27 所 示 的 是 Android 平板 电脑 中 目 市 的 电 
子 邮 件 应 用 ， 由 于 平板 电脑 屏 芝 比 较 大 ， 因 此 可 以 在 一 个 屏 芝 上 显示 更 多 的 内 容 。 当 然 ， 该 应 用 也 是 使 用 
左右 分 枉 的 导航 万 式 ， 磊 栏 是 上 一 级 视图 ， 右 栏 是 下 一 级 视图 ， 只 要 选择 左 栏 视图 中 的 项 目 ， 石 栏 内 容 残 
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会 跟 独 要 化 ， 不 需要 进行 界面 切换 残 可 以 完成 操作 。 
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5-27 Android 平板 电脑 上 的 电子 邮件 应 用 


5.2.4 Android 的 组 合 导航 


前 面 提 到 的 两 种 导航 模式 也 可 以 根据 用 户 的 需求 组 合 使 用 。 Google Play Muisc ”是 谷歌 公司 提供 
的 音乐 播放 应 用 ， 它 的 导航 结构 惑 组 合 使 用 了 这 两 种 导航 模式 。 从 图 5-28 中 我 们 可 以 看 到 ， 它 采用 了 标 
签 导 航 设 计 ， 用 户 可 以 点 击 标 签 或 左右 滑动 屏幕 实现 导航 。 而 流派 模块 则 采用 了 树 形 结构 导航 设计 ( 如 图 
5-29 所 示 )， “Jazz” 流 派 ( 左 图 )， 可 以 展开 “Jazz” 流 派 所 包含 的 专辑 ( 中 图 )， 选 择 其 中 的 专 
辑 可 以 查看 里 面 的 歌曲 ( 右 图 )。 
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5-29 “Google Play Muisc” 播 放 器 的 树 形 结构 导航 


5.3 Windows Phone 应 用 导航 模式 


如 果 只 从 用 户 体验 角度 来 评价 ，Windows Phone 是 很 值得 称赞 的 手机 操作 系统 ， 它 有 自己 非常 独到 
的 特点 和 规范 ， 主 要 采用 了 Metro 设计 风格 。 截 止 到 本 书 出 版 时 ，Windows Phone 8 仍 是 最 新 的 版 本 。 
与 之 前 的 Windows Phone 7 相 比 ， 它 在 用 尸体 验方 面 有 一 些 变 化 。 本 节 中 ， 我 们 将 重点 讨论 Windows 
Phone 8 的 导航 模式 。 

与 Windows Phone 导航 关系 非常 密切 的 控件 有 全 景 图 ( panorama ) 和 枢 轴 ( pivot )， 这 两 个 控件 
是 构成 Windows Phone 应 用 的 核心 “骨架 ， 大 部 分 应 用 都 是 由 它们 搭建 和 导航 的 。 

Windows Phone 应 用 主要 有 3 种 导航 模式 : 

。 标签 导航 

。 主页 菜单 导航 

。 面板 区 域 导 航 


5.3.1 Windows Phone 的 标签 导航 


Windows Phone 也 有 标签 导航 ， 它 主要 使 用 枢 轴 控件 实现 。 在 Windows Phone 中 ， 标 签 导 航 一 
般 用 来 解决 两 种 不 同 用 户 的 需求 : 数据 过 滤 和 功能 模块 的 切换 。 
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5-30 展示 的 是 Windows Phone 自 带 的 “Outlook” 应 用 ， 这 里 使 用 枢 轴 控件 的 目的 是 考虑 过 滤 


数据 。 这 个 应 用 有 4 个 页 面 : 全 部 邮件 、 未 读 的 、 已 标记 的 和 罕 急 。 这 4 个 页 面 的 内 容 和 结构 完全 一 样 ， 
只 不 过 是 过 滤 出 了 不 同 的 数据 集合 ， 而 每 个 页 面 的 压 部 都 有 相同 的 应 用 程序 栏 和 菜单 栏 。 
所 击 枢 轴 中 的 标签 ， 可 以 实现 页 面 切 换 ， 其 中 高 亮 显示 的 标签 为 当前 页 面 。 此 外 ， 还 可 以 通过 左右 滑 
屏 手 势 切 换 页 面 。 
疏 件 精 - GOOGLE LAUIL 四 性 条 - GOOQGLE MALL 路 性 策 - GOOGLE MAIL 
| ‘二 Wi 
全 部 邮件 未 读 的 已 标志 的 
Objective-C Group " Objective-C Group 5 Objective-C Group i 
Helhs Oj-E MLog IB "1 wn rope to i Halle OR-C NdLeg (@ "| mm now te 和 Hui D8-E NSLeg ("| gm re bo EF 
5-30 RS | | me ub, | | sks n pes 
Windows Phone 自 带 的 
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LinkedIn Updates 加 LinkedIn Updates 四 
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Objective-C Group me Objective-C Group a 
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5-31 展示 的 是 Windows Phone 目 市 的 “日 历 应 用 ， 这 里 使 用 标签 导航 是 出 于 功能 模块 的 切 


换 目 的 ， 其 中 也 使 用 了 枢 轴 控件 。 在 这 
别 很 大 ， 因 此 布局 也 有 很 大 的 不 同 。 
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Windows Phone 自 带 的 


日 历 应 用 


侍 办 事项 


文 个 应 用 中 ， 有 3 个 功能 模块 : 今天 、 日 程 和 待 办 事项 。3 个 功能 差 
虽然 它 们 之 间 相 互 独立 ， 但 都 与 日 历 有 一 定 的 天 系 。 
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使 用 枢 轴 的 时 候 页 面 的 个 数 尽量 不 要 起 过 7 个 ， 要 避免 空 日 页 面 ， 朋 页 面 客 度 不 能 超过 屏 壳 ， 也 不 要 
在 其 中 放置 水 平滑 动 的 控件 。 同 时 要 注意 标签 的 文字 要 尽量 人 简洁。 


5.3.2 面板 区 域 应 用 程序 中 心 导 般 


相对 来 说 ， 基 于 功能 模块 的 标签 导航 功能 比较 简单 。 如 果 应 用 的 功能 比较 复杂 ， 且 每 个 功能 模块 又 需 
要 深入 导航 ， 则 可 以 使 用 Windows Phone 的 面板 区 域 应 用 程序 中 心 导航 ， 这 种 导 般 主要 使 用 全 景 谍 

5-32 展示 的 是 Windows Phone 的 “Games 应用， 其 中 有 4 个 面板 区 域 ， 分 别 对 应 4 个 功能 
模块 : collection、spotlight、Xpox LIVE 和 requests 。 每 个 面板 都 可 以 是 它 自己 的 独特 区 域 ， 与 其 他 面 
板 无 天 ， 内 容 和 布局 也 有 很 大 的 差别 ， 点 击 其 中 的 内 容 可 以 进入 更 深 的 界面 。 

全 景 图 与 枢 轴 导航 不 同 ， 用 户 不 能 点 击 面 板 的 标签 进行 屏幕 切换 ( 如 collection )， 只 能 通过 滑 屏 手势 
进行 左右 屏幕 切换 。 


Game Hub 


图 5-32 Windows Phone 的 “Games ”应 用 


使 用 全 景 图 ， 可 以 设置 漂亮 的 背景 图 片 ， 图 片 高 度 为 800 像素 ， 宽 度 大 于 480 点 小 于 2000 点 ， 面 
板 尽量 不 要 多 于 4 个 ， 不 要 在 其 中 放置 水 平滑 动 控件 。 此 外 ， 使 用 全 景 图 控件 导航 的 时 候 ， 下 一 个 面板 的 
内 容 会 露出 一 点 ， 这 样 可 以 暗示 用 户 还 有 更 多 的 内 容 可 以 查看 。 
5.3.3 主 面 板 菜 单 应 用 程序 中 心 导航 


有 时 候 ， 为 了 把 几 个 相似 功能 的 不 同 应 用 定理 起 来 ， 我 们 可 以 及 用 主 面板 菜 蛙 应 用 程序 中 心 导航 。 
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这 种 情况 也 是 使 用 全 景 图 导航 ， 全 景 图 成 为 了 应 用 程序 的 集合 中 心 (Hub )， 进入 不 同 的 应 用 中 。 
5-33 展示 的 是 Windows Phone 自 融 的 “音乐 + 视频 应 用 ， 该 应 用 收录 了 music ( 音乐 播放 器 )、 
videos ( 视频 播放 器 入 podcasts ( 播客 )、radio ( 收音 机 ) 和 marketplace ( 商店 ) 等 几 个 不 同 的 应 用 ， 
这 也 是 Windows Phone 官方 没有 提供 单独 的 音乐 播放 器 和 视频 播放 器 的 原因 。 


/MUSICHVvIdeos 


zune history 


GC) Msie 


podcasts 
ragliod 


marketplace 


Music & Videos Hub 


图 5-33 Windows Phone 自 带 的 “音乐 + 视频 ”应 用 


在 这 种 导航 模式 里 ， 最 左 侧 的 面板 是 主 面板 ， 通 常用 菜 时 表现， 通过 菜 持 可 以 进入 不 同 的 应 用 。 除 了 
作为 某 单 的 主 面板 外 ， 还 需要 设计 其 他 面板 ， 一 般 包含 历史 记录 和 最 新 等 信息 ， 了 这样 用 户 使 用 起 来 瓯 很 万 
便 了 。 

接 下 来 ， 我 们 来 进一步 天 注 一 下 三 大 平台 的 标准 控件 。 
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很 多 设计 师 对 于 使 用 标准 控件 设计 的 应 用 不 丑 一 兢 ， 他 们 认为 那 体现 不 出 设计 师 的 水 平 。 事 实 上 ， 作 
为 一 名 好 的 用 户 体验 师 ， 首 先 要 懂得 规范 和 标准 ， 之 后 才 可 以 超越 规范 去 发 挥 创意 、 泻 染 个 性 。 三 大 平台 
都 有 各 自 不 同 的 设计 理念 和 规范 ， 而 遵循 这 些 规范 不 但 能 够 使 初学 者 迅速 进入 角色 ， 还 可 以 让 你 的 应 用 看 
上 去 更 有 各 平台 独特 的 味道 ， 但 是 我 们 决 不 能 去 做 “散发 着 苹果 味道 的 Android 应 用 。 

本 章 中 ， 我 们 将 向 大 家 介绍 iOS、Android 和 Windows Phone 三 大 移动 平台 标准 控件 的 使 用 和 
规 泄 。 


6.1 文本 输入 输出 


文本 信息 是 最 为 常用 的 界面 元 素 ， 根 据 输出 的 万 同 分 为 输入 和 输出 。 文 本 输入 是 用 尸 只 能 三 看 内 容 和 而 
不 能 修改 的 控件 ， 而 文本 输出 则 是 用 户 可 以 进行 编辑 修改 的 控件 。 


6.1.1 文本 输出 控件 


在 文本 输出 的 时 候 ， 我 们 可 以 设置 为 单行 文本 输出 、 多 行文 本 输出 和 可 设 定 样式 的 多 行文 本 输出 几 种 
情况 。 

1. 单行 文本 输出 

在 进行 单行 文本 输出 时 ，iOS 使 用 的 控件 为 Label ( 如 图 6-1 左 图 届 所 示 )，Android 使 用 的 控件 为 
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TextView ( 如 图 6-1 中 国 @ 所 示 ), Windows Phone 使 用 的 控件 为 TextBlock ( 如 图 6-1 右 图 @) 所 示 )。 
我 们 可 以 使 用 这 些 控件 输出 静态 文字 提示 信息 ， 但 是 它们 只 能 输入 一 行 短文 本 。 


当道 电 子 邮 任 


沉 雍 电子 邮 性 


添加 新 条 目 


添加 其 他 字段 


圣 景 


图 6-1 iPhone 的 “印象 笔记 〈 左 图 ) Android 平台 的 “联系 人 ”和 Windows Phone 平台 的 “人 脉 ” 


2. 多 行文 本 输出 

在 进行 多 行文 本 输出 时 , iOS 使 用 的 控件 为 TextView，Android 使 用 的 控件 为 TextView， 
Windows Phone 使 用 的 控件 为 TextBlock。 在 iOS 中 ，TextView 事实 上 是 可 输入 控件 ， 但 是 我 们 可 
以 将 它 设置 为 只 读 ， 这 样 就 可 以 将 它 作 为 输出 控件 了 。 而 Android 的 TextView 和 Windows Phone 的 
TextBlock 控件 不 仅 可 以 进行 单行 文本 输出 ， 也 可 以 进行 多 行文 本 输出 。 但 是 这 些 控件 对 文本 只 能 设置 统 
一 样式 ， 不 能 设置 不 同 的 样式 。 如 果 需 要 设置 不 同 的 样式 ， 我 们 可 以 使 用 Web 视图 。 

3. 可 设 定 样式 的 多 行 长 文本 输出 

可 设 定 样式 的 多 行 长 文本 输出 需要 使 用 Web 视图 来 实现 ， 主 流 的 移动 平台 都 有 对 应 的 Web 视图 。 

Web 视图 可 以 加 载 HTML、 解 析 CSS 和 运行 JavaScript 这 些 Web 技术 ， 因 此 我 们 只 要 使 用 网 页 设 
计 工 具 设 计 和 制作 出 移动 设备 大 小 的 网 页 就 可 以 了 ， 相 应 的 样式 可 以 通过 HTML 和 CSS 设置 。Web 
视图 还 有 另外 一 个 好 处 ， 那 就 是 可 以 加 载 图 片 、 声 音 等 多 媒体 文件 。 如 图 6-2 所 示 ， 从 左 到 右 分 别 是 
Android、iOS、Windows Phone 的 Web 视图 控件 。 
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图 6-2 Web 视图 控件 


6.1.2 文本 输入 控件 


文本 输入 也 分 为 单行 文本 输入 和 多 行文 本 输入 两 种 情况 。 具 体 地 说 ，iOS 在 这 两 种 情况 
控件 ， 而 其 他 两 个 平台 则 是 通过 采用 相同 的 控件 、 设 置 不 同 的 属性 实现 的 。 

1. 单行 文本 输入 情况 

IOS 使 用 的 控件 为 TextField ( 如 图 6-3 左 图 所 示 )， 默 认 样 式 为 圆 角 设计 。 虽 然 可 以 通过 设置 属性 
实现 直角 效果 ， 但 是 要 注意 与 整体 应 用 的 和 谐 统一 。 

Android 使 用 的 控件 为 EditText 控件 ( 如 图 6-3 中 图 所 示 )， 默 认 样 式 为 下 面 有 一 个 两 头 揭 起 的 横 
线 设计 。 在 获得 焦点 的 情况 下 ， 该 控件 是 高 亮 ( 默认 为 蓝 色 ) 显示 的 ， 失 去 焦点 的 情况 下 是 灰色 显示 的 。 

Windows Phone 使 用 的 控件 为 TextBox ( 如 图 6-3 右 图 所 示 )， 默 认 样 式 为 直角 设计 ， 在 获得 焦点 
的 情况 下 ， 该 控件 是 高 亮 显示 的 ， 失 去 焦点 的 情况 下 是 灰色 显示 的 。 


下 及 用 不 同 的 


图 6-3 iOS 的 TextField 控件 ( 左 图 )Android 的 EditText 控件 (中 图 ) 和 Windows Phone 的 TextBox 控件 ( 右 图 ) 


| guandongsheng@gmail.som 
guandongsheng@gm ail.com 


Password 
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2. 多 行文 本 输入 情况 
在 多 行文 本 输入 的 情况 下 ，Android 和 Windows Phone 都 采用 与 单行 文本 输入 同样 的 控件 。 只 
iOS 不 同 ， 它 使 用 的 控件 为 前 面 提 到 的 TextView 控件 ( 如 图 6-4 所 示 )。 


Lorem ipsum dolor sit er elit lamet, consectetaur 
cillium adipisicing pecu, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo 


consequat, Duis aute irure dolor in reprehenderit 
in voluptate ve 3 eu fugiat 
nulla pariatur. | t cupidatat 
non proide®&, sunt in ¢ qul officia deserunt 


mollit anim jd est laborum. Nam liber te 
conscient to factor tum poen legum odioque 


alwjslalrlylullole 
AlsjolrlslnjJJkl 
zlxlclvlelnIm 


.2123 space return 


图 6-4 
iOS 的 TextView 控件 


文本 输入 控件 与 键盘 密 不 可 分 ，3 个 平台 都 可 以 通过 设置 控件 的 属性 来 控制 弹出 的 键盘 类 型 。 一 般 来 
况 ， 文 本 输入 控件 在 获得 焦点 的 时 候 会 阐 出 键盘 ; 关闭 键盘 的 时 候 ，Android 和 Windows Phone 可 以 
使 用 返回 键 天 闭 ,， 但 iOS 设备 没有 返回 键 ， 关 闭 键 盘 需 要 通过 编程 实现 。 


6.2 按钮 


按钮 是 接收 用 户 点 击 事件 并 执行 操作 的 控件 。 按 钮 可 以 在 一 般 的 表单 中 使 用 , 也 可 以 在 各 种 “ 栏 ( 工 
具 栏 、 导 航 栏 和 标签 栏 等 ) 中 使 用 。 栏 ” 中 使 用 按钮 的 方法 将 在 后 面 的 章节 中 介绍 ， 本 章 主 要 介绍 表单 
中 的 按钮 控件 。 


6.2.1 iOS 平 台 按 钮 


iOS 使 用 的 按钮 控件 称 为 Button， 默 认 样 式 为 圆 角 设计 ( 如 图 6-5 所 示 )。 如 果 不 喜 欢 圆 角 按钮 ， 
可 以 目 定 义 类 型 ， 但 是 这 同样 需要 慎重 。 除 了 目 定 义 类 型 的 按钮 外 ，iOS 中 还 有 几 个 特殊 类 型 的 按钮 。 
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。 细节 展示 按钮 人 @ : 主要 用 于 表 视 图 中 的 细节 展示 。 
。 Info Light [可 和 Info Dark @O: 这 两 个 是 信息 按钮 ， 用 于 实用 型 应 用 程序 ， 点 击 后 进入 背后 视图 。 
。 添加 联系 人 按钮 @ 。 


Login 


6-5 iOS 的 Button 控件 ， 上 为 默 
认 状 态 ， 下 为 高 之 状态 


这 几 个 按钮 有 着 确定 的 含义 ， 绝 不 能 在 其 他 情况 下 使 用 。iOS 中 使 用 的 按钮 控件 还 支持 4 种 状态 : 默 
认 状 态 、 高 亮 状 态 、 选 择 状 态 和 不 可 用 状态 ， 这 4 个 状态 都 可 以 设置 不 同 背 景 图 片 和 和 样式。 
6.2.2 Android 平 台 按 钮 


Android 中 使 用 的 按钮 控件 称 为 Button 控件 ， 默 认 样 式 为 直角 设计 。 图 6-6 左 图 展示 的 为 Holo 深 
色 主 题 按钮 ， 右 图 展示 的 则 是 Holo 浅 色 主题 按钮 。Android 中 的 按钮 还 可 以 设置 为 无 边框 样式 ， 这 种 无 
边框 按钮 的 功能 与 iOS 的 自 定义 按钮 类 似 。 此 外 ， 还 可 以 在 无 边框 按钮 上 放置 图 标 ， 但 是 这 个 图 标 需 要 设 
计 成 为 透明 背景 ， 颜 色 单 一 ， 并 且 要 与 整体 应 用 的 主题 保持 一 致 。 


Login Login 


6-6 Holo 深 色 主 题 的 Android Button 控件 ( 左 图 ) 和 Holo 浅 色 主题 
的 Android Button 控件 ( 右 图 )， 上 为 正常 状态 ， 下 为 按 下 状态 


Login 


Login 


Android 系统 提供 了 3 种 不 同 风格 的 主题 : Holo 深 色 主 题 ( 如 图 6-7 左 图 所 示 )、Holo 浅 色 主题 (如 
6-7 中 图 所 示 ) 和 Holo 深浅 搭配 主题 ( 如 图 6-7 右 图 所 示 )。 通 过 主题 我 们 可 以 使 Android 应 用 保持 
统一 的 风格 。 
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6-7 Android 系统 3 种 不 同 风格 的 主题 


6.2.3 Windows Phone 平 台 按 钮 


Windows Phone 使 用 的 按钮 控件 称 为 Push Button 控件 ， 默 认 样 式 为 带 有 边框 的 直角 设计 ， 如 图 
6-8 所 示 。 我 们 可 以 在 Push Button 控件 中 添加 文本 和 图 标 信 息 ， 其 中 图 标 设计 与 Android 中 的 按钮 图 
标 类 似 : 颜色 单一 、 背 景 透 明 ， 并 且 与 整体 应 用 的 主题 保持 一 致 。 

在 Windows Phone 中 ， 还 有 一 种 用 来 在 界面 之 间 跳 转 的 超 链 接 按钮 ( HyperlinkButton )， 它 融 像 
是 网 页 中 的 HTML 超 链 接 功 能 ( 如 图 6-9 所 示 )。 


HyperlinkButton 


6-8 Windows Phone 的 Push 6-9 Windows Phone 的 超 链接 按钮 ， 上 
Button 按钮 ， 上 为 正常 状态 ， 为 正常 状态 ， 下 为 按 下 状态 
下 为 按 下 状态 


此 外 ，Windows Phone 系统 也 有 目 己 的 主题 ， 在 图 6-8 中 按钮 按 下 时 显示 为 蓝 色 ， 而 图 6-9 中 起 
链接 按钮 按 下 时 显示 为 红色 。 高 亮 状 态 下 的 不 同 颜 色 束 与 主题 相关 , 用 户 可 以 在 设置 功能 中 修改 这 些 主 题 
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6-10 展示 了 不 同 主题 的 开始 栗 面 ， 不 仅仅 是 开始 昌 面 的 色调 ， 所 有 设置 了 与 主题 相关 的 应 用 都 会 妆 化 。 


\ 


rake GSh Network 
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Fake tS hd Metwork 


6-10 
Windows Phone 系统 不 同 
风格 的 主题 


党 


图 6 儿童 同 地 


一 一 


劳 


周三 6 儿童 园地 


6.3 名 种 “ 栏 ” 


从 曲面 应 用 到 移动 平台 应 用 ， 各 种 各 样 的 “ 栏 ” 出 现在 我 们 的 应 用 中 ， 有 状态 栏 、 菜 单 栏 、 工 具 栏 、 
导航 栏 、 标 签 栏 、 操 作 栏 和 搜索 栏 等 ， 而 且 它 们 在 不 同 平台 之 间 也 有 一 些 磊 别 。 


6.3.1 状态 栏 


状态 栏 一 般 出 现在 屏幕 项 部 《Android 平板 电脑 出 现在 底部 ) 包含 网 络 情况 、 时 间 、 电 量 、 信 和 号 强 
度 、 通 知 等 用 户 需 要 的 信息 。 在 设计 沉浸 型 应 用 ( 如 游戏 、 视 频 等 ) 的 时 候 ， 为 了 增强 用 户 体验 ， 一 般 需 
要 把 状态 栏 隐 藏 起 来 。 而 在 其 他 情况 下 , 隐藏 状态 栏 束 要 慎重 考虑 了 。 状 态 栏 上 放置 的 是 非常 重要 的 信息 ， 
轻易 不 能 占用 它 。 隐 藏 之 后 的 状态 栏 要 能 够 适时 显示 出 来 ， 如 Windows Phone 中 是 通过 滑 屏 于 势 显 示 ， 
而 iOS 一 般 是 通过 点 击 屏 需 来 显示 。 

iOS 平台 的 状态 栏 有 着 固定 的 局 度 20 点 ， 可 以 设置 为 几 种 不 同 的 风格 ， 如 图 6-11 所 示 。 
3 iPhone 系 统 默 认 风 格 状态 栏 
3 iPhone 系 统 自 定义 风格 状态 栏 


于 于 iPad 系 统 默认 风格 状态 栏 
6-11 iOS 平台 的 状态 栏 风 格 
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需要 注意 的 是 , iPad 一 般 不 需要 隐藏 状态 栏 ， 因 为 20 点 的 状态 栏 对 于 iPad 的 大 屏 索 来 况 完全 可 以 
忽略 。 而 在 iPhone 屏 共 中， 状态 柱 显 示 与 舍 束 非常 容易 被 人 注意 到 。 因 此 ,我们 在 设计 背景 图 片 的 时 候 ， 
要 充分 地 考虑 到 iPad 和 iPhone 状态 栏 是 否 隐藏 的 问题 。 

根据 设备 的 不 同 ，Android 平台 的 状态 栏 的 位 置 和 高 度 是 不 同 的 ， 如 图 6-12 所 示 。 在 Android 手机 
中 ， 它 位 于 屏幕 顶部 ， 对 于 240 x 320 的 屏 带 来 说 ， 它 的 高 度 是 20 像素 ; 而 对 于 320 x 480 的 屏幕 高 度 
来 说 ， 它 的 高 度 是 25 像素 ; 对 于 480 x 800 的 屏 壳 来 说 ， 它 的 高 度 是 38 像素 。 在 Android 平板 电脑 中 ， 
状态 栏 位 于 屏 索 的 辰 部 右 伸 ， 搬 部 堪 侧 是 Android 导航 栏 。 


[人 ndroid 于 机 闪 态 臣 


Android 平 板 电脑 状态 栏 
6-12 _ Android 的 状态 栏 
Windows Phone 平台 中 的 状态 栏 如 图 6-13 所 示 ， 它 位 于 设备 顶部 ， 其 高 度 也 是 固定 的 ， 为 32 
像素 。 
EN Sy a 。 人 > > 
除 - 次” > A XA 如 次 ES W 


I A 12:38 


6-13 Windows Phone 的 状态 栏 


6.3.2 iOS 中 的 工具 栏 、 导 航 栏 和 标签 栏 


iOS 平台 有 3 个 最 常用 的 “ 栏 ， 即 工具 栏 、 导 航 栏 和 标签 栏 。 工 具 栏 和 导航 栏 的 高 度 是 一 样 的 ， 都 
是 44 点 ， 而 标签 栏 的 局 度 是 49 点 。 

1. 工具 栏 

工具 栏 主要 用 在 当前 屏 之 中 的 操作 处理 ， 没 有 导航 和 屏 带 跳 转 功能 。 在 iPhone 中 ， 工 具 栏 一 般 在 屏 
需 帮 部 ， 而 在 ijPad 中 ， 工 具 栏 一 般 在 屏 各 顶部 ， 如 图 6-14 所 示 。 在 iPhone 中 由 于 屏 舌 空间 所 限 ， 工 
有 具 栏 中 的 控件 不 能 过 多 ， 授 放 不 能 过 密 ， 它 们 的 点 击 区 域 不 能 小 于 44 x44 点 。 
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图 6-14 iPhone ( 左 图 ) 和 iPad ( 右 图 ) 上 的 工具 栏 


在 iOS 的 工具 栏 、 导 航 栏 和 标签 栏 中 ， 有 一 些 系统 图 标 样式 的 按钮 ， 这 些 按 钮 有 着 固定 用 途 ， 不 能 
挪 作 他 用 ， 如 [本 上 扫 钮 代表 撰写 邮件 ， 这 是 苹果 的 设计 规范 。 

2. 导航 栏 

在 iOS 中 , 导航 栏 位 于 屏幕 顶部 , 分 为 左 、 中 、 右 3 个 区 域 , 左右 区 域 放置 控件 , 中 间 区 域 一 般 是 标题 。 
导航 栏 主要 应 用 于 树 形 结构 导航 和 模 态 视图 中 。 在 树 形 结 构 导 航 中 ， 导 航 栏 如 图 6-15 所 示 。 在 一 级 视图 
界面 中 ， 导 航 栏 一 般 不 要 设置 左右 控件 ， 只 有 标题 就 可 以 了 。 而 在 二 、 三 级 视图 界面 中 ， 左 边 的 按钮 必须 
是 返回 上 一 级 按钮 ， 不 要 挪 作 他 用 ， 而 右边 的 控件 则 是 与 当前 界面 相关 的 操作 。 
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图 6-16 展示 的 是 模 态 视图 中 的 导航 栏 ， 这 种 情况 下 左边 需要 一 个 取消 操作 的 按钮 ， 没 有 这 个 按钮 用 
尸 将 无 法 关闭 模仿 视图 ,右边 需要 一 个 确定 操作 的 按钮 。 从 人 体 工程 学 的 角度 考虑 ,右边 的 按钮 更 万 便 操作 。 
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图 6-16 
iOS 模 态 视图 中 的 导航 栏 ， 
左 图 为 上 友 送 新 邮件 ， 右 图 


alwlsllrlylulUolp alwlsljrlvuluUolP 


为 新 建 联系 人 
Alsiplrlelnly kit 县 Ajsjpjrlslnljkl 
zlxlclvlelNIm EE | dzlxlclvlelnI™ 
3. 标签 栏 
IOS 的 标签 栏 位 于 屏幕 底部 ， 它 的 用 途 就 是 实现 标签 导航 以 及 应 用 中 功能 模块 的 切换 ， 不 应 该 用 于 其 


他 的 目的 。 

我 们 要 注意 工具 栏 和 标签 栏 的 区 别 ， 工 具 栏 关注 的 是 当前 界面 的 操作 ， 它 的 操作 按钮 中 不 能 有 屏 适 的 
切换 ， 而 标签 栏 关 注 的 是 整体 导航 ， 有 屏幕 的 切换 。 此 外 ， 标 签 栏 不 能 出 现在 模仿 视图 中 。 在 iPhone 中 ， 
如 果 同 时 需要 工具 栏 和 标签 栏 ， 由 于 屏 融 大 小 所 限 最 好 适时 地 隐藏 标签 栏 。 


6.3.3 Android 中 的 菜单 栏 和 操作 栏 


在 Android 中 完成 导航 和 操作 处 理 等 工作 可 以 由 操作 栏 和 荣 单 栏 完 成 ， 其 中 操作 柱 是 非 汕 复杂 且 功 能 
强大 的 “ 栏 。 下 面 我 们 先 看 看 操作 栏 。 

1. 操作 栏 

操作 栏 起 到 导航 、 切 换 视图 和 操作 菜单 等 作用 ， 其 基本 构成 如 图 6-17 所 示 ， 主 要 分 为 4 个 区 域 。 由 
部 分 为 应 用 图 标 ， 如 果 不 是 一 级 视图 ， 其 中 会 有 向 上 按钮 。(2 部 分 放置 的 是 一 个 下 拉 列 表 控件 ， 用 来 快速 
切换 视图 。(3) 部 分 放置 一 些 完成 当前 界面 操作 的 按钮 。(4) 部 分 是 溢出 ( 更 多 ) 按钮 。 由 于 (3) 部 分 的 空间 
有 限 ， 可 以 通过 点 击 这 个 溢出 按钮 ， 显 示 更 多 不 单 用 的 操作 按钮 。 


图 6-17 | a 
基本 的 操作 栏 构成 心 Action Bar pp (人 


操作 柱 是 一 个 很 复杂 的 控件 ， 在 具体 使 用 的 时 候 还 可 以 分 割 成 几 个 不 同 的 部 分 ， 如 图 6-18 所 示 ， 其 
中 (部 分 为 主 操作 栏 ， 用 于 放置 向 上 按钮 、 应 用 图 标 和 应 用 名 称 等 。'2 部 分 为 顶部 栏 ， 用 于 放置 标签 ， 起 
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到 导航 和 切换 视图 的 作用 。') 为 底部 栏 ， 一 般 会 将 操作 栏 的 操作 按钮 放 到 这 里 ， 起 到 菜单 的 作用 。 


Le Action Bar 


图 6-18 
操作 栏 分 割 


从 图 6-19 里 我 们 可 以 看 到 ， 印象 笔记 ”应 用 用 了 主 操作 栏 和 底部 栏 的 设计 布局 。 Apollo 应 用 
采用 了 项 部 栏 和 底部 栏 的 布局 设计 。 
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2. 菜单 栏 

在 Android 4 之 后 ， 采 蛙 主 要 有 了 两 种 : 上 下 文 菜单 和 弹出 菜单 。 上 下 文采 早 是 用 户 在 选择 了 列表 视图 
和 表 视 图 中 的 一 个 项 目 后 出 现 的 菜单 ， 采 单 的 内 容 是 针对 该 项 目的 操作 。 上 下 文 菜 蛙 还 可 以 细 分 为 : 操作 
栏 模式 上 下 文 菜单 《如 图 6-20 左 图 所 示 ) 和 浮动 上 下 文 菜单 ( 如 图 6-20 右 图 所 示 )。 显示 上 下 文 菜单 
的 手势 一 般 是 长 按 选 择 项 目 。 


全 部 播放 
图 6-20 Postmaster@163.com 2 月 19 日 站 
Android 中 的 上 下 文 菜单 系统 过 信 . 抱 考 ， 储 的 好 件 被 回来 了 设置 为 手机 铃声 
赵 子 航 2 月 19 日 搜索 


at 
" 
< 
对 


~ JU 


弹出 有 荣 单 是 针对 当前 视图 的 操作 ， 它 的 弹出 市 有 铂 点 ， 所 同 触 友 它 的 按钮 。 图 6-21 展示 了 应 用 的 弹 
出 菜单 ， 用 户 通 过 点 击 右 下 角 的 “溢出 按钮 ”弹出 菜单 ， 将 销 点 指 同 溢出 图 标 。 


Altemmative | 加 


Blues | 本 


6—21 
Android 中 的 弹出 菜单 人 | 
azz | | 
设置 
Other 
均 汪 器 
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6.3.4 Windows Phone 中 的 菜单 栏 


Windows Phone 中 的 “ 栏 ”没有 iOS 和 Android 那么 多 ， 这 里 我 们 只 介绍 菜单 栏 。 在 Windows 
Phone 中 ， 菜 单 栏 有 两 种 : 应 用 菜单 栏 ( ApplicationBar ) 和 上 下 文 菜单 ( ContextMenu )。 

1. 应 用 菜单 栏 

应 用 菜单 栏 又 有 两 种 不 同 的 形式 : 图 标 按钮 和 菜单 。 图 标 按钮 带 有 图 标 和 文本 ， 而 菜单 只 能 由 文本 构 
成 。 应 用 菜单 栏 可 以 设 定 为 全 局 菜单 和 局 部 菜单 两 种 形式 。 全 局 菜单 可 以 出 现在 应 用 的 所 有 界面 中 ， 它 提 
供 了 一 些 全 局 的 功能 操作 。 局 部 菜单 提供 对 当前 视图 界面 的 操作 功能 。 图 6-22 是 Windows Phone 8 自 
带 的 Office 应 用 ， 其 中 左 图 屏幕 下 方 为 图 标 按钮 ， 它 们 都 有 着 固定 的 用 途 ， 不 能 挪 作 他 用 。 向 上 滑动 图 标 
后 面 的 “按钮 ， 可 以 打开 右 图 所 示 的 菜单 ， 显 示 更 多 的 功能 和 选项 列表 。 


晤 狂 


熊猫 


二 


大 赎 猫 仅 生 存在 中 国 野外 ， 深 受 全 球 不 
同年 龄 屋 次 的 人 们 的 喜爱 。 它 们 有 着 毛 
绒 绒 的 黑白 身 氏 ， 性 情 害 凑 温 顺 ， 被 人 
们 视 为 最 可 爱 的 动物 之 一 。 


大 熊猫 仅 生存 在 中 国 野 外 ， 深 受 全 球 不 
© OOOO 
大 者 队 计 查 搜 和 


6-22 Windows Phone 中 的 应 用 菜单 栏 


2. 上 下 文 菜单 

上 下 文 菜单 与 Android 平台 中 的 上 下 文 菜单 的 作用 是 一 样 的 。 当 用 户 选 择 并 长 按 项 目 时 ， 会 出 现 上 
下 文 菜单 。 图 6-23 展示 的 是 Windows Phone 8 自 带 的 Office 应 用 。 当 用 户 长 按 “ 示 例文 档 ” 项 目 时 ， 
出 现 如 图 6-23 右 图 所 示 的 上 下 文 菜单 。 
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最 近 使 用 | 
ER 


此 示例 文档 
O 
只 示例 演示 | 示例 文档 


6-23 Windows Phone 中 的 上 下 文 菜单 


6.3.5 搜索 栏 


当 应 用 中 有 大 量 的 数据 需要 展示 给 用 户 时 ， 我 们 需要 在 应 用 中 设置 搜索 功能 。 搜 索 栏 可 以 帮助 我 们 实 
现 这 个 功能 ， 然 而 只 有 iOS 提供 了 实 实 在 在 的 搜索 栏 和 范围 选择 栏 控件 ，Android 和 Windows Phone 
平台 没有 相关 的 搜索 控件 ， 但 是 它们 也 提供 了 标准 的 解决 万 守 。 

1. iOS 搜索 栏 和 范围 选择 栏 

iOS 提供 的 与 搜索 相关 的 栏 有 两 个 : 搜索 栏 ( 如 图 6-24 上 图 所 示 ) 和 范围 选择 栏 ( 如 图 6-24 中 图 
和 下 图 所 示 )， 它 们 的 高 度 都 是 44 点。 为 了 提示 用 户 ， 搜 索 栏 中 可 以 设置 提示 信息 ， 而 且 搜 索 栏 后 面 还 可 
以 设置 其 他 形式 的 按钮 。 荡 围 选择 栏 是 为 搜索 指定 搜索 的 范围 ， 它 与 搜索 栏 “形影不离 ， 在 空间 比较 狭 
窄 的 情况 下 , 它 位 于 搜索 栏 的 下 方 ( 如 图 6-24 中 图 所 示 ), 在 空间 比较 大 的 情况 下 , 它 位 于 搜索 栏 的 右边 ( 如 
6-24 下 图 所 示 )。 搜 索 栏 在 形式 上 与 iOS 的 分 段 控件 类 似 ， 在 iPhone 中 段 的 个 数 一 般 不 要 超过 5 个 ， 


最 后 一 个 段 应 该 设置 为 “全 部 。 
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图 6-24 
iOS 搜索 栏 和 范围 选择 栏 


iPhone 中 带 有 范围 选择 栏 的 搜索 栏 〈 横 屏 ) 


在 iOS 的 不 同 设 备 (iPad 和 iPhone ) 中 ， 搜 索 栏 的 使 用 也 有 一 些 区 别 。 基 于 屏幕 尺寸 的 考虑 ， 在 
iPhone 中 搜索 栏 应 设 位 于 内 容 视 图 上 ， 并 随 着 内 容 视 图 的 滚动 而 深 动 ， 而 不 应 该 固定 于 屏 茹 之 上 ， 人 否则 
你 可 以 操作 的 空间 就 会 太 小 ， 图 6-25 展示 的 是 iPhone 中 “邮件 ”应 用 的 搜索 栏 ， 它 会 随 着 下 面 的 邮件 
列表 一 起 滚动 。 同 样 的 “邮件 ”应 用 在 iPad 中 就 不 是 这 样 设计 的 ， 如 图 6-26 所 示 。 


路 件 箱 (53) 
| 总 搜索: 收 忻 御 


Apple 13-2-26 


Your recent download with your Appl... } 
Dear long lia, Your Apple ID, 
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Apple 12-9-27 | 
条 | 
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Apple 12-9-20 | 
Your Apple ID Was used to sign in to... 全 
Dear long, Your Apple ID leonent®@163.com) 


网 易 邮 件 中 心 13-1-24 Was USed to dlgn In to IMessage on an IP... 图 6-25 

2013， 让 我 们 一 起 坚持 一 个 梦想 ! a » vy 
网 易 邮件 中 心 关于 网 易 - 关于 网 易 免 费 闻 - DEVDIV.COM 12-8-7 Phone 中 邮件 ”应 用 搜索 村 
客户 服务 - 隐 秋 政 策 网 易 公 司 版 权 所 有 岛 ... [DEVDIV.CDMI Email 地 址 验证 > 


Email 地 址 验证 jyldragon， 这 封 信 是 由 
DENVNDIV.COM 发 送 的 。 您 收 到 这 封 郎 件 ，... 


MOTODEYV 12-7-27 


ing Event: Migrating Your Leg... | 
Having trouble viewing this email? View it 


关东 升 好 13-1-21 


Coupon 
关东 升 北京 智 捷 东 方 科技 有 限 汉 司 手机 : 
13050406077 器 中 ;270258799 新 浪 微 博 .，. 
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图 6-27 
iPhone 中 搜索 栏 呈 现时 


隐藏 导航 栏 QlwjelrltIlYiulilolre 
AlslolFlelnly kt 


123 时 | space earcl 


2. Android 平台 搜索 模式 

在 Android 平台 中 ， 昌 然 没有 特定 的 搜索 栏 控件 ， 但 是 有 比较 成 玖 的 搜索 模式 。 图 6-28 展示 的 是 
-Google Play Muisc 播放 器 ， 其 中 左 图 的 操作 栏 中 有 一 个 放大 镜 图 标 按钮 吃 ， 这 个 按钮 是 Android 平 
台 专 用 的 搜索 按钮 ， 不 能 挪 作 他 用 。 当 点 击 搜索 按钮 时 ， 会 出 现 搜索 栏 输入 框 ( 如 图 6-28 中 图 所 示 )， 
在 输入 框 中 输入 内 容 时 ， 搜 索 栏 输入 框 后 面 会 出 现 取消 按钮 x ( 如 图 6-28 右 图 所 示 )。 
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After School Session 


1 严 
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After School Ses 
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The Best Hooker N 
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图 6-28 Android 上 的 “Google Play Muisc” 播 放 器 


3. Windows Phone 平台 搜索 模式 

Windows Phone 平台 也 与 Android 平台 类 似 ， 没 有 特定 的 搜索 栏 控件 ， 但 是 也 有 比较 成 熟 的 搜索 
模式 。 图 6-29 左 图 展示 的 是 Windows Phone 平台 的 应 用 商店 ， 在 屏幕 底部 的 菜单 栏 上 有 一 个 放大 镜 图 
标的 搜索 按钮 2 ， 这 个 按钮 也 是 Windows Phone 平台 中 专用 的 搜索 按钮 。 点 击 这 个 按钮 ， 会 在 屏幕 顶 
部 出 现 搜 索 栏 输入 框 ， 这 个 搜索 框 是 自动 完成 输入 框 控件 ， 只 输入 几 个 字母 ， 它 束 会 在 搜索 框 中 列 出 相 匹 
本 0 的 内 容 ( 如 图 6-29 右 图 所 示 )。 


apple bin 
apple squash 
Apple Quick Tips 


Golf Tips (AppleTV HD) 


图 6-29 
Windows Phone 平台 的 应 用 商店 
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这 里 搜索 框 使 用 的 是 自动 完成 输入 框 ， 它 一 般 用 于 网 络 搜索 。 如 果 在 本 地 ， 可 以 使 用 普通 的 文本 输入 
框 。 图 6-30 展示 的 是 Windows Phone 自 带 的 Outlook 应 用 ， 在 右 图 的 搜索 框 中 输入 内 容 的 同时 ， 会 
将 搜索 结果 展示 在 下 面 的 列表 中 。 


21.45 
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Objective- 光志 Group 153 


wi [2] iobs ' 0 
Objective-C Group a- 在 Cooge Mail 中 搜索 
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图 6-30 
Windows Phone 上 的 [linkedln Oa Ma 本 
Outlook 应 用 bd ed a Ed Ea dd dE 
inkedin Today A asdfighjkl 
Objective- C Group m 全 | zx el ve ml 到 


6.4 滑 块 控件 


使 用 滑 块 控件 能 够 选取 一 个 连续 区 域 蕊 围 内 的 值 ， 例 如 可 以 设置 音量 和 屏 壳 腕 戎 等 值 。 三 大 平台 都 有 
自己 的 滑 块 控件 。 根 据 应 用 的 需要 , 滑 块 控件 可 以 垂直 或 者 水 平 放置 , 但 水 平 放置 更 符合 我 们 的 使 用 习惯 。 


6.4.1 iOS 平 台 滑 块 控件 


图 6-31 展示 的 是 iOS 的 视频 播放 应 用 ， 其 中 两 处 使 用 了 滑 块 控件 ， 顶 部 导航 栏 中 的 滑 块 控件 可 以 
所 示 视频 的 播放 进 厌 ， 下 面 播放 控件 栏 中 的 滑 块 可 以 调节 视频 的 声音 大 小 。 

为 了 形象 地 表示 大 小 的 变化 方向 ， 可 以 在 滑 块 控件 的 两 站 添加 图 标 ( 如 图 6-32 所 示 )， 当 然 图 标 
与 滑 块 控件 没有 必然 联系 。 此 外 ， 我 们 还 可 以 改变 滑 块 的 样式 ， 其 中 轨 遵 和 辆 钮 的 样式 都 可 以 改变 ， 
6-33 展示 的 是 修改 了 默认 风格 的 滑 块 控件 。 
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下 午 11:03 > & 


0:03 -1:09:57 ETI 加 


6-31 
iOS 的 视频 播放 应 用 


6-32 
添加 了 图 标的 滑 块 控件 


# 站 


怀 采矿 搬 


图 6-33 
修改 了 iOS 默认 标准 风格 的 
滑 块 控件 


6.4.2 Android 平 台 滑 块 控件 


6-34 左 图 所 示 是 Android 系统 的 “设置 ”应 用 ， 它 在 声音 设置 中 使 用 了 3 个 滑 块 控件 。 滑 块 控 
件 也 有 Holo 浅 色 和 深 色 主 题 。 与 iOS 一 样 ， 滑 块 控 件 在 媒体 播放 应 用 中 用 于 显示 和 控制 播放 进度 。 
6-34 右 图 展示 的 是 Android 的 “Google Play Muisc” 播 放 器 。 当 然 ， 我 们 也 可 以 改变 它 的 默认 风格 。 


第 6 章 ”标准 控件 与 设计 规范 135 


Doxy 
MAIles Davis 


Music, video, games, & other media 


1 i 


Ringtone & notifications . 
wy EE | a ] 
| 


, 多 es javis 


So 


6-34 Android 系统 的 “设置 ”应 用 ( 左 图 ) 和 Google Play Muisc 播放 器 ( 右 图 ) 


6.4.3 Windows Phone 平 台 滑 块 控件 


6-35 是 Windows Phone 的 视频 播放 应 用 ， 这 个 应 用 与 iDS 视频 播放 应 用 非 党 类似， 也 有 两 处 
使 用 了 滑 块 控件 : 右边 的 王 直 滑 块 控件 可 以 调节 视频 的 声音 大 小 ， 下 面 的 播放 控件 栏 中 的 滑 块 可 以 指示 视 
频 的 播放 进度 。 


DIOIORCR: 


00:00.42 / 00.03:42 


6-35 ”Windows Phone 视频 播放 应 用 
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6.5 选择 控件 


设计 和 开 友 移动 应 用 时 ， 我 们 应 该 尽量 减少 用 尸 输 入 : 一 方面 是 设备 屏 壤 尺寸 小 ， 不 万 便 和 输入 ; 另 一 
万 面 是 输入 需要 验证 内 容 的 正确 性 。 因 此 ， 我 们 应 该 尽 可 能 使 用 这 些 选择 控件 选择 需要 的 内 容 。 与 选择 相 
天 的 控件 有 : 二 选 一 控件 、 单 选 控件 、 多 选 控 件 以 及 拾取 器 控件 ( Picker ) 等 。 


6.5.1 二 选 一 


在 iOS 平台 里 ， 能 实现 二 选 一 功能 的 只 有 开 天 控 件 ， 而 在 Android 和 Windows Phone 中 有 很 多 控 
件 可 以 担当 此 任务 ， 这 些 控件 包括 开关 控件 、 开 关 按 钮 和 复 选 杠 。 

1. Android 平台 中 的 二 选 一 控件 

6-36 左 图 展示 的 是 Holo 浅 色 和 深 色 主题 的 Android 开关 控件 ， 控 件 造型 非常 形象 ， 可 以 通过 点 
击 或 滑动 实现 状态 切换 。 在 Android 早期 版 本 中 没有 这 个 开关 控件 ， 而 是 使 用 图 6-36 右 图 所 示 的 开关 按 
钮 ， 其 造型 是 个 按钮 ， 也 有 按钮 的 相关 属性 和 事件 ， 点 击 它 可 以 进行 两 种 状态 的 切换 。 此 外 ， 我 们 还 可 以 
选择 使 用 单个 复 选 框 控件 来 表示 二 选 一 的 情况 ( 如 图 6-37 所 示 )。 


ON Wl [WW Checkbox 


En OFF W416 本 | Checkbox 
图 6-36 Android 的 开关 控件 图 6-37 Android 的 复 选 框 


2. Windows Phone 平台 中 的 二 选 一 控件 

6-38 左 图 展示 的 是 蓝 色 主题 的 Windows Phone 开关 控件 ， 用 法 与 Android 的 开关 控件 一 样 。 
Windows Phone 也 有 开关 按钮 ( 如 图 6-38 中 图 所 示 ) 和 复 选 框 控 件 〈 如 图 6-38 右 图 所 示 )。 

3. iOS 平台 中 的 二 选 一 控件 

在 iOS 平台 中 ， 二 选 一 控件 只 有 一 个 ， 那 惑 是 开关 控件 ， 如 图 6-39 所 示 。 不 要 试图 去 找 或 使 用 其 他 
平台 的 复 选 框 形 式 的 控件 ， 这 会 使 你 的 应 用 变 得 不 伦 不 类 。 


ToggleButton oN € 


Label 


~ 


ToggleButton 


图 Label | OO F C 


6-38 Windows Phone 开关 控件 ( 左 图 )、 开 关 按 图 6-39 iOS 开关 控件 
钮 ( 中 图 ) 和 复 选 框 控件 ( 右 图 ) 
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6.5.2 单 选 控件 


顾名思义 ， 单 选 控 件 就 是 从 一 组 选项 中 选择 一 个 ， 不 能 多 选 ， 同 一 组 中 的 选项 是 互 奈 的 。 这 种 控件 又 
叫做 “收音 机 按钮 ”, 按 下 一 个 其 他 的 按钮 就 会 弹 起 。 对 于 收音 机 按钮 , 每 一 个 平台 都 有 一 个 控件 与 之 对 应 。 
6-40 左 图 是 Holo 浅 色 和 深 色 主题 的 Android 收音机 按钮 ， 图 6-40 右 图 是 Windows Phone 收 苔 机 
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6-40 ” ”Android ( 左 图 ) 和 Windows Phone ( 右 图 ) 的 收音 机 按钮 


在 iOS 中 ,收音 机 按钮 被 称 作 “分 段 控件 ， 它 的 默认 样式 如 图 6-41 左 图 所 示 。 在 每 一 个 段 中 ， 可 
以 设置 图 片 ， 示 例 图 如 图 6-41 中 图 所 示 。 有 的 时 候 ， 还 可 以 将 分 段 控件 放置 在 工具 栏 和 导航 栏 中 ， 
6-41 石 图 是 分 段 控 件 的 工具 栏 样式 。 图 6-42 展示 的 是 iPhone “邮件” 应 用 中 把 分 段 控 件 放置 在 导航 栏 
中 的 实例 。 


国 :: 全 小 ~ a 


图 6-41 iOS 分 段 控 件 ( 左 图 为 默认 样式 ， 中 图 为 囊 图 标 样式 ， 厂 图 为 工具 栏 样式 ) 


Apple > 


收 件 人 : | eorient@163.com » 


Your recent download with your Apple 


e013 年 2 月 28 上 日 下 和 9 


图 6-42 
在 iOS 导航 栏 中 使 用 分 段 控件 
De we pa 
Bi mi cr ws RA Und Re pr J fer 
Ar ra Wo A i i Bm rn ve th ll Pn writ 
eh Tin Arpds EI Fea sury Mie bs Pec Bi Prd 
ra rp oe FTPO 人 ret Er tH tart a 


TE ey i pe i he PE FE Pd Par 

ri sh Fai i es i ra 本 Fs Wp 区 

dE Bei rer i Ear PuiMun Wak rts I Ti es 
Src rg eh ap cd yen rer hes Bre 更 
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6.5.3 ”多 选 控件 


多 选 控件 可 以 使 用 户 在 多 个 选项 中 进行 选择 ， 选 择 的 个 数 是 不 定 的 。 在 Android 和 Windows Phone 
平台 中 ， 这 都 是 使 用 复 选 框 控 件 实现 的 。 而 iOS 平台 没有 复 选 框 控件 ， 我 们 可 以 借助 表 视 图 ， 为 表 视 图 的 
单元 格 加 上 选中 标志 ( 如 图 6-43 所 示 )。 


选择 你 擅长 的 移动 平台 


Repeat alarm | 
iOS 


Every Monday 


Android v 
Every Tuesday Windows Phone 
Every Wednesday 

Every Thursday 

Every Friday 


Every Saturday 


Every Sunday 


Caneel 


6-43 ” Android 平台 的 多 选 控件 ( 左 图 )、Windows Phone 平台 的 多 选 控件 ( 中 图 ) 以 及 iOS 平台 使 用 
表 视 图 实现 多 选 的 方式 ( 右 图 ) 


6.5.4 拾取 器 


一 些 普通 的 选择 信息 ， 可 以 使 用 普通 拾取 器 控件 。 


普通 拾取 器 一 般 用 于 选择 少量 的 列表 信息 ， 比 如 车 辆 尾 号 ， 只 有 0 ~ 9 个 数 子 。 而 长 的 大 量 列 表 信 息 
在 iOS 平台 中 应 该 采用 表 视 图 ( 如 图 6-43 右 图 所 示 )。 在 Android 和 Windows Phone 平台 中 ， 应 该 把 
复 选 框 放 在 列表 视图 中 ( 如 图 6-43 左 图 和 中 图 所 示 )。 

图 6-44 是 iPhone 的 “Tip-Culator 应 用 ， 它 使 用 了 iOS 中 的 普通 拾取 器 控件 ， 这 个 拾取 器 可 以 
自 定 义 拨 轮 的 个 数 以 及 拨 轮 中 的 内 容 。 

图 6-45 展示 了 在 Windows Phone 平台 中 设置 主题 ， 其 中 背景 和 主题 色 的 设置 采用 了 普通 拾取 器 。 
在 Windows Phone 中 ， 普 通 拾取 器 有 两 种 ， 一 种 是 点 击 拾取 器 直接 多 出 选择 项 目 ， 界 面 不 跳 转 ， 示 例 
图 如 图 6-45 中 图 所 示 。 另 一 种 点 击 拾取 器 后 界面 会 跳 转 ， 示 例 图 如 图 6-45 右 图 所 示 ， 这 种 情况 下 备 选 
的 项 目 比 较 多 ， 选 择 后 会 返回 到 上 个 界面 。 
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6-44 
iOS 平台 的 普通 拾取 器 


More apps 


NT rel 


ice Caller ID Ringtones 


图 6-45 Windows Phone 的 设置 主题 


在 Android 平台 中 ， 普 通 拾取 器 控件 叫 Spinner， 我 们 一 般 把 它 翻译 为 “下 拉 列 表 ” 或 “下 拉 菜 单 ”。 
图 6-46 展示 的 是 Android 的 “日 历 ” 应 用 ， 其 中 操作 栏 中 有 一 个 Spinner 控件 ， 通 过 它 可 以 选择 不 同 
形式 的 视图 。 
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图 6-46 
Android 的 “日 历 ” 应 用 


2. 日 期 和 时 间 拾 取 器 

日 期 和 时 间 的 录入 是 比较 抹 烦 的 ， 如 果 和 直接 输入 ， 则 需要 验证 它们 的 有 效 性 ， 因 此 ， 几 乎 所 有 的 平谷 
都 提供 了 日 期 和 时 间 选 择 的 控件 。 

在 iOS 平台 上 ， 日 期 和 时 间 拾 取 器 是 同一 个 控件 DatePicker。 拾 取 器 有 4 种 模式 : 日 期 、 日 期 + 时 
间 、 时 间 和 定时 器 ( 如 图 6-47 所 示 )。 图 6-48 是 iPhone “时 钟 ” 应 用 ， 其 中 的 倒计时 器 模块 使 用 了 定 


时 器 模式 的 拾取 器 控件 。 
-~ 


3 月 8 日 周 五 | sls 


日 期 + 时 间 模 式 


图 6-47 
日 期 和 时 间 拾 取 器 


时 间 柑 式 定时 责 模 式 
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6-48 
iPhone “时钟 ”应 用 


计时 结束 时 ， 启 用 。” 马 林 巴 琴 》 


在 Windows Phone 平台 中 ， 日 期 和 时 间 拾 取 器 是 两 个 不 同 的 控件 一 一 DatePicker 和 TimePicker。 
6-49 展示 了 在 Windows Phone 中 设置 系统 日 期 的 功能 ， 其 中 的 日 期 选择 采用 了 日 期 拾取 器 ， 上 点击 左 
图 的 日 期 ， 弹 出 新 的 界面 ， 可 以 上 下 滑动 来 选择 年 、 月 、 日 。 


[i 


日 期 + 时 间 


并 CC | 


选择 日 期 


选择 日 期 


2013 03 2013 03 08 


6-49 Windows Phone 日 期 拾取 器 


6-50 展示 了 在 Windows Phone 中 设置 系统 时 间 的 功能 ， 其 中 的 时 间 选 择 采 用 了 时 间 拾 取 器 ， 
点 击 左 图 的 时 | 间 ， 会 弹出 新 的 界面 ， 然 后 上 下 滑动 来 选择 小 时 和 分 钟 。 
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CI Ce 


设置 选择 时 间 


日 期 + 时 间 


Cd 


6-50 ”Windows Phone 的 时 间 拾 取 器 


在 Android 平台 中 ， 日 期 和 时 间 拾 取 器 也 是 两 个 不 同 的 控件 一 一 DatePicker 和 TimePicker。 
6-51 展示 的 是 Android 设置 系统 日 期 的 功能 ， 其 中 设置 日 期 采用 了 日 期 拾取 器 。 点 击 左 图 的 日 期 ， 会 弹 


[AW 


出 禹 有 拾取 器 的 对 话 框 ， 点 击 上 下 按钮 可 以 选择 年 、 月 、 日 。 完 成 后 ， 扎 击 “设置 ”按钮 关闭 对 话 框 。 


日 期 和 时 间 
自动 确定 日 期 和 时 间 
自动 确定 时 区 


设置 日 期 


6-—51 
Android 日 期 拾取 器 


设置 时 间 


使 用 24 小 时 格式 


选择 日 期 格式 


6-52 展示 的 是 Android 设置 系统 时 间 的 功能 ， 其 中 的 时 间 设 置 采 用 了 时 间 拾 取 器 ， 点 击 左 图 的 时 


间 ， 会 弹出 带 有 拾取 器 的 对 话 框 ， 可 以 点 击 上 下 按钮 选择 小 时 、 分 钟 和 上 下 午 。 完 成 后 点 击 “ 设 置 ” 按 钮 ， 
关闭 对 话 框 。 
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日 期 和 时 国 


自动 确定 日 期 和 时 间 


自动 确定 时 区 
设置 日 期 
3 从 本 
Android 时 间 拾 取 器 人 间 


使 用 24 小 时 格式 


选择 日 期 格式 


6.6 ”对 话 框 


对 话 框 的 作用 很 多 ， 形 式 上 也 很 丰 早 ， 有 的 是 提升 用 户 信 息 ， 有 的 是 让 用 户 选 择 操作 。 下 面 我 们 分 别 
针对 不 同 的 平台 介绍 它们 的 用 法 。 


6.6.1 iOS 平 台中 的 对 话 框 


IOS 平台 中 的 对 话 框 有 3 种 视图 形式 : 警告 框 (AlertView )、 操 作 表 ( ActionSheet ) 和 分 享 列表 
(Activity )。 


1. 警告 框 


警告 框 是 用 来 给 用 户 提示 信息 ， 或 者 让 用 户 进 行 选择 的 对 话 框 。 警 告 框 至 少 有 一 个 按钮 ， 没 有 按钮 的 
警告 框 会 让 用 户 无 所 侍从 。 在 一 个 按钮 的 情况 下 ， 它 的 作用 是 提示 用 户 〈 如 图 6-53 所 示 )。 使 用 一 个 按 


钮 的 警告 框 时 ， 一 定 要 慎重 。 和 警告 框 是 一 种 非 党 强势 的 对 话 框 ， 不 管用 户 在 做 什么 ， 尼 都 会 弹出 并 显示 在 


屏幕 中 央 ， 这 样 的 用 户 体验 很 不 好 。 如 果 只 是 为 了 告诉 用 户 “ 有 新 的 版 本 需要 更 新 ， 用 户 会 怎么 样 想 呢 ? 
这 个 应 用 或 许 对 于 你 很 重要 ， 而 对 于 用 户 来 说 可 


能 只 是 沧海 一 攻 ， 不 值得 一 提 ， 此 时 我 们 推荐 采用 推送 通 
和 类 将 这 些 消息 提示 给 用 户 ， 用 户 可 以 设置 是 人 否 弹 出 这 类 信息 。 
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6-53 
只 有 一 个 按钮 的 iOS 警 千 框 


如 果 需 要 让 用 尸 确认 ， 可 以 使 用 两 个 按钮 的 闸 告 框 。 从 图 6-54 中 你 可 能 会 友 现 这 里 有 两 个 警告 框 ， 
而 它们 的 Yes 和 No 按钮 是 相反 的 。 事 实 上 ， 这 两 个 按钮 的 位 置 有 很 大 的 学 问 ， 如 果 进行 没有 破坏 性 的 操 
作 ， 确 定性 操作 按钮 在 右边 ， 而 取消 操作 按钮 在 左边 ， 这 是 因为 右边 的 按钮 不 容易 被 拇指 按 到 。 如 果 进 行 
的 是 破坏 性 操作 时 ， 确 定性 操作 按钮 在 左边 ， 而 取消 操作 按钮 在 右边 。 


提示 信息 
有 新 的 版 本 更 新 图 6-54 
具有 两 个 按钮 的 iOS 警告 框 
Yes No 


2. 操作 表 

使 用 警告 不 应 该 超 过 两 个 按钮 ， 如 果 有 更 多 的 操作 可 以 选择 ， 我 们 可 以 采用 操作 表 。 如 图 6-55 左 图 
所 示 ， 在 iPhone 中 ， 操 作 表 会 从 屏 替 下 方 滑 出 。 注 晶 ， 取 消 操作 动作 按钮 应 该 在 最 下 面 。 操 作 表 中 也 有 
天 于 破坏 性 操作 的 考虑 ， 如 图 6-55 石 图 所 示 ， 红 色 的 Delete 按钮 是 破坏 性 操作 ， 它 放置 在 最 上 面 ， 系 
统 给 它 标识 为 醒目 的 红色 。 


图 6-55 


Delete iPhone 中 的 操作 表 


Cancel Cancel 
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在 iPad 中 ， 操 作 表 的 显示 并 非 从 屏幕 下 面 滑 出 ， 而 是 出 现在 屏幕 中 央 ( 如 图 6-56 左 图 所 示 )， 或 者 
把 它 放 到 浮动 层 中 显示 ( 如 图 6-56 右 图 所 示 )。 需 要 注意 的 是 ， 在 iPad 中 ， 取 消 操作 按钮 消失 了 ， 这 是 
因为 在 这 里 取消 操作 是 通过 再 次 点 击 触 友 它 的 按钮 实现 的 。 


Pad /ios 6.0 (10A403) 


‘Ponsor Review 


图 6-56 
iPad 中 的 操作 表 er 
te | 
3. 分 享 列表 


在 iOS 6 之 前 , 分 享 操作 是 由 操作 表 实 现 的 ,在 iOS 6 之 后 , 它 可 以 使 用 分 享 列表 ( Activity ) 来 实现 。 
6-57 左 图 为 iPhone 中 的 分 享 列表 ， 它 的 出 现形 式 与 操作 表 类 似 ， 都 是 从 屏 融 下面 滑 出 的 。 图 6-57 
石 图 为 iPad 中 的 分 享 列表 ， 它 应 该 在 浮动 层 中 出 现 。 在 iPad 中 使 用 分 享 列表 时 ， 也 没有 “取消 ”按钮 。 


6-57 iOS 中 的 分 享 列表 


6.6.2 Android 平 台中 的 对 话 框 


在 Android 平台 中 ， 能 够 给 用 户 提 示 的 控件 有 两 个 : 对 话 框 和 Toast。 
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对 话 框 的 样式 也 有 很 多 种 ， 可 以 根据 你 的 需要 进行 选择 。 它 们 可 以 不 市 标题 ( 如 图 6-58 左 图 所 示 )， 
也 可 市 标题 《如 图 6-58 右 图 所 示 )。 它 们 的 操作 按钮 个 数 是 1 ~ 3 个。 如 图 6-59 所 示 ， 在 两 个 按钮 的 
情况 下 确定 性 操作 按钮 在 右边 ， 而 取消 操作 按钮 在 左边 。 在 Android 对 话 框 中 ， 内 容 有 多 种 形式 ， 可 以 是 
一 般 广 本、 列表 控件 或 一 般 控 件 。 在 列表 控件 对 话 框 中 ， 还 可 以 有 多 选 和 单 选 等 形式 ( 如 图 6-60 所 示 )。 


Phone ringtone 


This contact will be 


deleted. Silent 


Cancel 


Cancel 


Android 对 话 框 的 标题 样式 
刘 面 1 :09 


Volumes 


Music, video, games, & other media 
一 -人 @ 


Ringtone & notifieations 


A Single choice list 


Map bs 


Satellite 


Alarms 


Traffic 
Street View 


Cancel 


Android 对 话 框 的 操作 按钮 样式 
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分 


Every Monday 


A 


Every Tuesday 
WE 


Every Wednesday 


Satellite 
Every Thursday 
Traffic 
Every Friday 
Street view 
Every Saturday 
Cancel 


Every Sunday 


Cancel 


6-60 Android 对 话 框 的 内 容 样式 


2. Toast 
Android 提供 了 一 种 不 需要 用 户 交 互 的 提示 控件 一 一 Toast。Toast 没有 任何 按钮 ， 它 出 现 一 会 儿 后 


会 目 动 消失 。 图 6-61 展现 的 是 添加 联系 人 时 退出 页 面 的 提示 。 


训 
“A DONE 


Phone-only unsynce.. 后 : 


TonyGuan 


Eorient 


图 6-61 [Title 
Android 中 的 Toast 


Contact saved. | 


6.6.3 Windows Phone 平 台中 的 对 话 框 


Windows Phone 平台 中 的 对 话 框 是 在 屏幕 顶部 弹出 的 ， 可 以 有 1 ~ 2 个 按钮 ， 其 中 一 个 按钮 的 情 
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况 如 图 6-62 所 示 。 在 具有 两 个 按钮 的 时 候 ， 它 们 的 位 置 与 Android 截然 相反 ( 如 图 6-63 所 示 )， 确 定 
性 操作 按钮 在 左边 ， 而 取消 操作 按钮 在 右边 。 图 6-63 左 图 是 编辑 邮件 时 候 没 有 保存 就 直接 退出 时 的 提示 
信息 , 这 种 情况 下 “保存 ”是 确定 性 操作 ， 删除” 是 取消 性 操作 。 图 6-63 右 图 是 删除 短信 时 的 提示 信息 ， 
这 种 情况 下 “删除 ”是 确定 性 操作 ， 取消 ”是 取消 性 操作 。 


要 保存 或 删除 消息 吗 ? 
是 要 将 该 消息 保存 到 您 的 草稿 文件 来 ， 还 是 
将 其 从 手机 上 删除 ? 


删除 对 话 吗 ? 


6-62 Windows Phone 中 的 一 个 6-63 Windows Phone 中 的 两 个 按钮 对 话 框 
按钮 对 话 框 


我 们 看 到 ， 在 具有 两 个 按钮 的 对 话 框 中 ， 确 定性 操作 按钮 在 左边 好 还 是 在 右边 好 ，3 个 移动 平台 都 有 
所 区 别 ，iOS 平台 比较 灵活 ， 而 其 他 的 两 个 则 是 固定 的 。 这 源 目 于 各 个 平台 的 设计 理念 ， 我 们 要 设计 出 具 
有 特定 平台 特征 的 应 用 ， 残 必须 遵守 这 些 规 沁 。 


6.7 活动 指示 器 和 进度 条 


活动 指示 器 和 进度 条 用 来 将 任务 进行 的 情况 反馈 给 用 户 。 活 动 指示 器 在 不 能 确定 任务 进度 的 情况 下 使 
用 ， 只 要 它 一 直 在 动 就 说 明 任务 没有 结束 ， 如 果 停止 则 说 明 任务 完成 。 进 度 条 在 能 够 知道 任务 进度 的 情况 
下 使 用 ， 通 过 它 可 以 告诉 用 户 任务 处 理 的 进展 情况 。 下 面 我 们 还 是 按照 各 个 平台 介绍 它们 的 用 法 。 
6.7.1 iOS 平 台中 的 活动 捐 示 器 和 进度 条 


在 iOS 平台 中 ， 活 动 指示 器 如 图 6-64 中 的 由 所 示 。 此 外 ， 它 也 可 以 出 现在 状态 栏 中 ， 表 示 当 前 任 
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务 是 网 络 通信 任务 ， 如 图 6-64 中 的 (2 所 示 。 


Apple 13-2-26 
Your recent download with your Appl... > 
Dear long jia, Your Apple ID, 


图 6-64 eorienNnt@163,com, Was just used to downl,., 
iOS 活动 指示 器 Pulse 13-2-26 
Welcome to Pulse, zhao! > 


Hello zhao Welcome to Pulse Thanks for 
creating your Pulse account. You can no... 


网 易 邮件 中 心 13-1-24 
2013， 让 我 们 一 起 坚持 一 个 梦想 ! > 
网 易 邮件 中 心 关于 网 易 - 关于 网 易 免费 邮 - 
客户 服务 - 隐私 政策 网 易 公司 版 权 所 有 @... 


关东 升 允 13-1-21 
Coupon 


设计 活动 提示 器 的 目的 是 为 了 消除 用 户 的 心理 等 待 时 间 ， 它 的 呈现 要 能 与 环境 融合 在 一 起 。 图 6-65 
是 iPhone 的 “iBooks 应 用 , 其 中 左 图 是 应 用 刚刚 开始 启动 加 载 图 书 , 其 中 会 有 一 个 浮动 的 等 待 指 示 器 。 
而 图 6-65 中 图 是 从 苹果 App Store 上 加 载 数 据 ， 这 时 显示 的 等 待 指示 器 被 放 在 右上 角 的 编辑 按钮 中 。 当 
等 待 指示 器 停止 后 ， 按 钮 又 变 回 “编辑 “了 《如 图 6-65 右 图 所 示 )。 


iPad 


work 
Wdure 2 


图 6-65 iPhone 的 “iBooks” 应 用 
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图 6-66 左 图 展示 的 是 iOS 进度 条 ， 它 可 以 显示 任务 的 进度 情况 。 为 了 防止 进度 条 太 突 岂 ， 可 以 将 
其 放 在 工具 栏 等 控件 中 ( 如 图 6-66 右 图 所 示 )。 


Downloading... S50% 
i 一 一 载 中 ... 


图 6-66 ”iOS 的 进度 条 


6.7.2 Android 平 台 的 活动 指示 器 和 进度 条 


Android 中 的 活动 指示 器 是 一 个 转动 的 圆 环 ， 与 ijOS 平台 中 一 样 ， 其 呈现 位 置 要 能 够 与 应 用 有 机 结合 
在 一 起 ， 比 如 图 6-67 左 图 将 活动 指示 器 放 在 对 话 框 中 。 图 6-67 右 图 是 Android 的 进度 条 。 在 Android 
中 ， 进 度 条 还 可 以 设置 “第 一 进度 条 ”和 “第 二 进度 条 ”， 其 中 高 亮 显 示 的 是 第 一 进度 条 ， 稍 微 瞳 一 点 的 


1 个 口 
是 第 二 进度 条 。 


图 6-67 Android 中 对 话 框 中 的 活动 指示 器 ( 左 图 ) 和 进度 条 ( 右 图 ) 


6.7.3 Windows Phone 平 台中 的 活动 指示 器 和 进度 条 


Windows Phone 中 的 活动 指示 器 与 i1OS 和 Android 平台 不 同 ， 它 是 5 个 运动 中 的 小 圆 点 。 此 外 ， 
活动 指示 器 还 可 以 有 标题 ， 如 图 6-68 右 图 所 示 。 图 6-69 是 活动 指示 器 的 实例 ， 它 的 位 置 没有 什么 特 
殊 的 规定 。 在 图 6-69 左 图 和 中 图 中 ,活动 指示 器 位 于 内 容 视图 中 ， 内 容 出 现 则 活动 指示 器 消失 。 在 图 
6-69 石 图 中 ,活动 措 示 器 在 屏幕 顶部 ， 覆 六 了 状态 栏 。 


| connecting 


6-68 活动 指示 器 
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收藏 夹 
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Public 
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6-69 活动 指示 器 的 位 置 


和 逐 末了 取 趾 
用 的 情况 是 在 多 媒体 播放 中 指示 播放 进度 ， 这 种 情况 下 也 可 以 使 用 滑 块 ， 它 们 的 区 别 是 : 滑 块 可 以 拖 蝶 ， 


万 便 改变 播放 进度 ; 进度 条 只 能 显示 进度 ， 用 尸 不 能 通过 拖 蝶 改变 进度 ， 若 要 改变 进度 ， 要 通过 其 他 的 挥 


6-70 展现 的 是 Windows Phone 的 进度 条 ， 它 的 形式 与 Android 进度 条 比较 相似 。 进 度 条 最 常 


件 按钮 来 实现 ， 如 图 6- 71 所 示 。 


6-71 活动 指示 器 实例 
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6.8 列表 和 网 格 


列表 和 了 网 格 是 能 够 包谷 其 他 控件 的 内 容 视 图 。 事 实 上 ， 它 们 是 一 种 布局 方式 。 每 一 个 平台 都 有 目 己 个 
同 的 风格 ， 当 然 它 们 运用 列表 和 和 网 格 的 方式 也 是 不 同 的 。 列 表 是 只 显示 一 列 的 内 容 视 图 ( 如 图 6-72 左 
图 所 示 )， 而 网 格 是 显示 多 列 多 行 的 内 容 视 图 ( 如 图 6-72 右 图 所 示 )。 


图 6-72 
列表 ( 左 图 ) 和 网 格 〈 右 图 ) 示意 图 


下 面 我 们 分 别 看 看 这 3 个 平台 上 它们 的 用 法 。 


6.8.1 iOS 平 台 列 表 和 网 格 


在 iOS 平 台中， 列表 视图 是 表 视 图 (TableView )。 不 要 误会 ， 它 虽然 叫做 “ 表 视 图 ， 但 它 是 只 有 
一 列 的 表 ， 是 图 6-72 左 图 所 示 的 列表 。 网 格 视图 在 iOS 平台 叫做 CollectionView ( 集合 视图 )， 它 是 在 
iOS 6 之 后 推出 的 ， 以 前 实现 网 格 效 果 比 较 抹 烦 。 

1. 表 视 图 

在 iOS 中 , 表 视 图 是 最 常用 的 且 形 式 丰 高 多 样 的 视图 , 其 使 用 涉及 布局 、 导 航 和 展示 数据 等 万 万 面 面 。 
它 主要 分 为 普通 表 视 图 ( 如 图 6-73 左 图 所 示 ) 和 分 组 表 视 图 ( 如 图 6-73 右 图 所 示 )， 下 面 简要 介绍 一 
下 这 两 种 视图 。 

。 普通 表 视 图 。 主 要 用 于 动态 表 ， 而 动态 表 一 般 在 蛙 元 格 数目 未 和 的 情况 下 使 用 。 

。 分 组 表 视图 。 一 般 用 于 静态 表 ， 会 将 表 分 成 很 多 “孤岛 ,这 个 “孤岛 ”由 一 些 类 似 的 单元 格 组 成 。 

静态 表 一 般 用 于 控件 的 界面 布局 ， 它 是 在 iOS 5 之 后 在 故事 板 中 提供 的 。 
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于 多 | 风格 
Alternative 通用 
AlternRock | 搜索 引擎 Yahool 》 
Electronic 自动 填充 关闭 》 
Hard Rock 打开 链接 在 新 页 面 中 》 
图 6-73 ea | 
普通 表 视图 ( 左 图 ) 和 有 
分 组 表 视 图 ( 右 图 ) Pop / Oldies 秘密 浏览 ”0 
Punk 接受 Cookie 从 访问 过 的 网 页 > 
其 他 
动 TfT 鲁 小 


‘ 本 


此 外 ， 表 视图 中 还 可 以 市 有 索引 列 、 选 择 列 和 搜索 栏 等 。 图 6- /4 左 图 展示 的 是 索引 表 视 图 。 一 般 情 
况 下 , 在 表 视 图 超过 一 屏 的 情况 下 , 应 该 添加 系 5| 询 。 图 6-74 中 图 所 示 的 是 选择 表 视 图 , 这 在 前 面 介绍 过 。 
6-74 右 图 所 示 的 是 市 有 搜索 栏 的 表 视 图 。 


上 上午 3:16 
全 部 联系 人 


Adak 

Addis_Ababa 

Adelaide Anna Hare 

a Daniel Higgins Jr. 
Algiers -一 一 


David Taylor 


同 世 过世 区 圳 站 各 类 和 


Hank M. Zakroff 


图 6-74 iOS 的 索引 表 视 图 ( 左 图 )、 选 择 表 视图 ( 中 图 ) 和 搜索 栏 表 视图 ( 右 图 ) 


2. 集合 视图 

在 iOS 中 使 用 集合 视图 的 场景 不 是 很 多 。 相 对 而 言 ， 在 iPad 上 使 用 集合 视图 要 比 iPhone 多 一 些 。 
6-75 左 图 是 iPad 上 的 “iBooks ”应 用 ， 这 里 布 满 图 书 的 书架 采用 的 就 是 集合 视图 。 图 6-75 右 图 是 
iPad 上 的 “时 钟 ” 应 用 ， 也 采用 了 集合 视图 。 
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国 | 
二 下 


图 6-75 
iPhone 的 “iBooks” 应 用 ( 左 图 ) 
和 iPad 的 “时 钟 ” 应 用 ( 右 图 ) 


6.8.2 Android 平 台 列 表 和 网 格 


在 Android 平台 中 ， 列 表 视 图 使 用 的 场景 也 很 多 ， 而 网 格 视图 使 用 相对 比较 少 。 

1. 列表 视图 

Android 中 的 列表 视图 有 两 种 主要 形式 : 普通 列表 视图 和 分 组 列表 视图 。 图 6-76 左 图 是 Android 的 
邮件 ”应 用 ， 它 采用 的 是 普通 列表 视图 ， 其 中 每 个 列表 项 目 比 较 简 单 ， 没 有 层次 关系 。 而 图 6- 76 中 图 
是 Android 的 “设置 应 用 ， 它 采用 的 是 分 组 列表 视图 ， 无 线 和 了 网络” 组 包含 了 “Wi-Fi 、 监 牙 、 流 
量 使 用 情况 ”和 更 多 等 列表 项 目 。 图 6-76 右 图 是 Android 的 “联系 人 ”应 用 ， 它 采用 的 是 市 有 索引 
的 分 组 列表 视图 ， 用 手 拖 暇 屏 早 石 边 的 垂直 滚动 条 ， 残 会 出 现 论 5 引 了 。 


收 十 独 
2 2005b0hahE leS eom 过 

腻子 航 此 年 Ti 
讨 丰 型 
Ba - 
i 有 

立 本 全 县 讲 如 电 上 
虑 子 航 ds 
册 酒 录 晤 国 


图 6-76 

Android 的 “邮件 ”应 用 ( 左 图 小 
“设置 ”应 用 ( 中 图 ) 和 “联系 人 ” 
应 用 ( 右 图 ) 
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2. 网 格 视图 

在 Android 中 使 用 网 格 的 场景 也 不 是 很 多 ， 主 要 企 进行 网 格 布局 的 情况 下 使 用 ， 而 且 平板 电脑 要 比 
手机 上 用 得 多 。 图 6-77 是 Android 手机 “谷歌 Play 音乐 ”播放 器 应 用 ， 其 中 左 图 是 “最 近 播 放 ”模块 ， 
它 采 用 网 格 视图 显示 歌曲 专辑 图 片 ， 而 其 他 模块 (“艺术 家 ”模块 ， 如 图 6-77 中 图 所 示 ) 采用 列表 视图 。 
而 同样 是 “艺术 家 ”模块 ， 在 Android 平板 电脑 上 融 采 用 了 网 格 视图 布局 ， 如 图 6-77 右 图 所 示 。 
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6-77 Android“ 谷 歌 Play 音乐 ”播放 器 应 用 


6.8.3 Windows Phone 平 台中 的 列表 和 网 格 


在 Windows Phone 平台 中 ， 我 们 使 用 列表 视图 ( ListBox ) 展示 列表 信息 ， 而 网 格 视图 并 不 存在 ， 
若 要 实现 网 格 效果 ， 可 以 通过 网 格 布局 容器 实现 。 

1. 列表 视图 

在 Windows Phone 平台 中 ， 列 表 视 图 非常 灵活 。 通 过 为 列表 项 指定 模板 ， 我 们 可 以 构建 任何 信息 
的 列表 。 它 的 应 用 非常 广泛 并 可 以 与 全 景 图 、 枢 轴 结 合 使 用 ， 当 然 也 可 单独 使 用 。 图 6-78 左 图 展示 的 是 
Windows Phone 的 “游戏 ”应 用 ， 它 是 在 全 景 图 中 使 用 了 列表 视图 。 图 6-78 右 图 是 Windows Phone 
的 “市 场 ” 应 用 ， 它 在 枢 轴 中 使 用 了 列表 视图 。 
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6-79 是 Windows Phone 版 本 的 “USA TODAY ”应 用 ， 


强 视 部 效 果 。 
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6-79 Windows Phone 上 的 “USA TODAY” 应 用 


6-78 
Windows Phone 的 “游戏 ”应 用 
( 左 图 ) 和 市 场 应 用 ( 右 图 ) 


它 的 很 多 模块 都 采用 了 网 格 布局 来 增 
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在 Windows Phone 中 ， 这 种 网 格 效果 设计 用 于 很 多 地 万 ， 这 也 是 Windows Phone 倡导 的 Metro 
风格 。 我 们 在 Windows Phone 主屏 幕 中 也 可 以 看 到 类 似 的 网 格 效果 ， 这 里 的 网 格 叫做 “ 磁 贴 ， 具 有 导 
航 和 接收 通知 等 作用 。 在 下 一 章 里 ， 我 们 将 继续 介绍 这 两 种 视图 布局 方式 可 以 给 我 们 的 应 用 界面 市 来 的 个 
性 化 视觉 体 验 。 


6.9 原型 的 可 用 性 测试 


这 部 分 内 容 是 一 个 承 上 局 下 的 关键 环 石 ， 因 为 我 们 的 设计 到 了 这 一 步 刚 好 可 以 告 一 段 洛 。 现 在 ， 我 们 
可 以 通过 前 面 知 识 的 积累 ， 利 用 各 个 平台 的 规范 ， 运 用 电脑 图 形 软 件 制作 出 一 套 真 正 的 移动 应 用 原型 文件 
了 ， 而 且 完 全 可 以 达到 送 交 程序 员 进 行 实 现 的 水 准 。 但 是 由 于 缺 之 个 性 化 设计 以 及 视 完 吸引 力 的 塑造 ， 这 
个 原型 显得 比较 简略 、 单 调和 呆板 。 通 剃 ， 我 们 把 这 个 阶段 称 为 原型 的 “中 保 真 ”阶段 。 

但 是 ， 这 个 中 保 真 的 原型 毕竟 已 经 是 一 个 非常 完整 的 移动 应 用 模型 了 ， 只 不 过 看 上 去 不 那么 好 看 ， 它 
是 我 们 整个 设计 过 程 的 里 程 碑 ， 是 我 们 下 一 步 工 作 的 起 点 ， 而 且 最 关键 的 是 ， 我 们 可 以 利用 它 进 行 移动 应 
用 设计 的 可 用 性 测试 。 

可 用 性 测试 我 们 在 第 1 草 曾 向 大 家 介绍 过 ， 束 是 把 我 们 设计 好 的 原型 文件 输入 到 移动 设备 里 进行 操作 
尝试 或 交互 体验 。 入 时 的 万 法 和 原型 草图 的 测试 一 样 ， 束 是 把 每 个 页 面 存 成 JPEG 格式 ， 排 好 顺序 放 到 
手机 或 平板 电脑 的 相册 里 ， 左 右 划 屏 来 模仿 页 面 的 跳 转 ， 体 会 应 用 程序 的 操作 流程 、 运 行 状 态 和 布局 、 导 
航 的 合理 性 。 正 规 的 方法 是 ， 利 用 你 身边 的 程序 员 或 者 使 用 Flash 软件 把 我 们 的 原型 文件 做 成 一 个 可 以 通 
过 点 击 按钮 实现 页 面 跳 转 的 简易 程序 或 动画 。 之 后 ， 找 来 一 些 有 代表 性 的 用 户 ， 对 我 们 的 应 用 原型 进行 典 
型 操作 和 尝试 ， 我 们 和 开发 人 员 一 起 在 一 旁观 察 、 聆 听 、 做 记录 ， 最 好 能 录像 ， 这 样 我 们 可 以 反复 观察 和 
搓 摩 。 

在 测试 过 程 中 ， 一 定 要 注意 测试 者 的 每 一 个 操作 细节 ， 认 真 记 录 他 们 的 每 一 条 意见 和 建议 ， 包 括 人 体 
工程 学 万 面 的 舒适 度 、 布 局 的 合理 性 和 扣 击 范围 的 精确 性 。 而 且 ， 我 们 要 敢于 面 对 现实 ， 不 情 推 翻 重 来 ， 
甚至 从 起 步 阶 段 进行 调整 。 事 实 上 ， 任 何 项 目 都 不 可 能 一 帆 风 顺 ， 这 对 于 我 们 来 说 已 经 算是 家 常 便 饭 了 。 
当然 ， 经 验 和 阅历 残 是 这 样 积累 起 来 的 ， 所 以 绝 不 会 得 不 途 失 的 。 


我 们 为 “艺术 品 收 藏 ”应 用 也 制作 了 一 套 原 型 ， 如 图 6-80 所 示 。 由 于 这 个 应 用 的 切 袁 丈 需要 比 
较 个 性 化 ， 所 以 企 原 型 设计 上 并 没有 使 用 六 多 规范 鸭 元 素 。 
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图 6-80 iPad 上 的 “艺术 品 收藏 ”应 用 原型 文件 


我 们 的 “艺术 品 收 藏 ” 应 用 是 针对 iOS 平台 的 iPad 设备 而 开发 的 ， 并 且 只 在 横 屏 模式 下 运行 。 
由 于 只 是 原型 的 低 保 真 阶 段 ， 所 以 我 们 只 是 把 所 有 的 功能 和 控件 在 宁 辐 上 芍 囊 出 来 ， 并 进行 规范 化 和 和 
人 体 工 程 学 上 的 凋 整 。 从 特性 上 来 说 ， 它 既是 一 球 图 片 浏 唤 工 具 ， 义 是 一 本 电子 杂志 ， 所 以 功能 比较 
简 持 ， 米 用 了 人 证 表 式 布 局 作为 主页 面 的 布局 ， 作 品 浏 刚 采用 平 铺 导 航 。 该 册 用 昌 特 点 和 优势 主要 在 于 
内 容 信息 和 钢 苋 元素 ， 所 以 ， 我 们 要 佳之 后 的 个 性 化 设计 中 投入 更 多 的 精力 。 

企 进行 本 用 性 测 弃 后 ， 我 们 归纳 出 了 这 样 一 些 政 竺 解决 的 问题 。 

。 主 岁 布局 死板 ， 信 息 显 示 个 完整 。 

。 控件 位 置 安 排 散 配 ， 操 作 个 顺手 。 

。 作品 信息 处 理 多 板 ， 上 且 胡 坏 了 作品 的 完整 性 。 

。 没 能 突出 男 克 鸭 主题 ， 没 有 身 必 其 境 的 感 贺 。 

。 细 生 粗糙， 构图 不 产 语 。 


原型 制作 完成 了 ， 可 用 性 测试 结束 了 ， 并 全 面 收集 了 问题 。 现 在 我 们 再 次 做 好 了 准备 ， 迎 接 下 一 阶段 
站 生化 设计 


第 7 章 
视觉 体验 的 个 性 化 


无 论 你 使 用 哪 一 个 操作 平台 的 移动 设备 ， 都 会 家 无 数 绚丽 多 彩 、 个 性 十 足 的 应 用 所 吸引 。 大 部 分 用 户 
在 接触 一 款 应 用 的 内 容 和 功能 之 前 ， 都 会 从 感性 上 对 它 的 视 竞 效果 和 个 性 体验 有 所 评价 ， 而 这 个 评价 会 


接 影 响 用 户 对 这 个 应 用 的 深入 了 解 程 度 ， 以 及 应 用 在 移动 设备 中 仔 企 的 寿 售 。 也 残 是 记 ， 当 我 们 试图 捕 试 
一 球 应 用 的 时 候 ， 如 果 界 面 的 视 完 体验 非常 棒 ， 那 么 束 算 不 是 我 们 需要 的 内 容 或 功能 ， 也 会 愿意 把 它 留 在 


设备 里 ， 深 入 挖掘 以 备 后 用 或 介绍 给 其 他 用 户 ; 反 过 来 讽 ， 如 果 应 用 界面 平淡 无 奇 或 不 太 友 好 ， 即 使 是 我 
们 很 需要 的 内 容 或 功能 ， 从 心理 上 也 会 排斥 它 ， 简 单 快速 地 从 应 用 里 把 目 己 需要 的 乐 西 得 到 后 ， 残 把 它 抛 
胡 或 遗 筷 了 。 因 此 ， 对 于 很 多 用 户 来 讽 ， 界 面 的 视 竞 效果 和 个 性 化 体验 是 选择 应 用 的 重要 依据 。 

在 本 章 里 ， 我 们 将 为 大 家 由 浅 入 深 地 展现 出 提高 应 用 视 况 体验 的 方法 ， 通 过 我 们 精心 的 包 委 和 修 烦 让 
你 的 应 用 充满 个 性 和 吸引 力 。 经 过 前 面 几 章 的 介绍 ,我 们 已 经 能 够 依据 三 大 平台 的 导航 、 探 件 和 布局 的 规范 ， 
设计 出 相当 严谨 的 符合 三 大 平台 的 高 保 真 原型 ， 但 是 能 舍 从 专业 的 角度 去 完善 、 修 改 、 甚 至 打破 规范 地 去 
继续 完成 我 们 的 设计 之 旅 ， 是 需要 很 多 经 验 和 技术 又 持 的 ， 下 面 我 们 从 各 个 角 厦 一 一 为 大 家 前 明 。 


7.1 做 有 个 性 的 应 用 


前 面 我 们 曾经 提 人 到， 应 用 的 控件 、 导 航 和 基本 布局 要 符合 各 个 应 用 平台 的 规范 要 求 ， 这 样 才 能 适应 各 
目 平 台 产 品 的 硬件 要 求 和 风格 特点 。 这 样 的 话 ， 用 户 体验 设计 似乎 没有 我 们 想象 得 那么 难 ， 我 们 只 需要 根 
据 规 范 模 板 安排 好 大 的 布局 ,选择 好 导航 万 式 ， 把 相应 的 控件 对 号 入 座 束 可 以 完成 一 蒜 应 用 的 原型 设计 了 。 
这 种 流水 线 一 样 的 设计 万 式 看 上 去 似乎 既 人 简单 又 有 效 ， 而 且 设 计 出 来 的 应 用 也 很 美观 和 规 炬 ， 毕 葛 这 些 平 
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台 人 在 友 布 相应 规 泄 的 时 候 是 充分 考虑 到 审美 和 视 竞 天 系 的 ， 示 例 图 如 图 7-1 所 示 。 然 而 ， 对 于 那些 希望 
己 的 应 用 在 个 性 体验 和 视 完 冲击 力 上 有 所 追求 的 设计 师 来 咬 ， 这 样 的 结果 上 略 显 平淡 了 些 。 


Radio Player 


7-1 iOS 平台 的 Things《〈 左 图 ) Android 平台 的 YouTube ( 中 图 ) 和 Windows Phone 平台 的 Radio Lounge UK 右 图 ) 
都 严格 遵循 了 各 自 平台 布局 和 控件 的 规范 ， 且 美观 大 方 


作为 设计 师 ， 我 们 不 甘心 也 不 希望 目 己 的 应 用 与 平台 上 的 其 他 应 用 整齐 划一 而 缺乏 个 性 ， 那 么 我 们 融 
要 试 着 改变 我 们 的 设计 ， 打 破 它 们 的 规范 ， 让 我 们 的 应 用 脱 痢 而 出 ， 吸 引 眼 球 。 但 是 在 这 样 做 之 前 我 必须 
提醒 大 家 ， 这 个 过 程 绝 不 能 攒 着 目 己 的 一 厅 情 愿 而 随心 所 欲 地 进行 。 作 为 一 名 成 玖 的 设计 师 ， 我 们 无 论 做 
出 任何 突破 和 改变 ， 都 需要 建立 在 对 三 大 平台 所 有 的 规范 细 证 深入 了 解 的 基础 上 ， 同 时 有 具备 对 图 形 元 素 、 
色彩 规律 、 字 体 样式 、 风 格 特 效 等 各 个 万 面 的 深刻 理解 和 非 几 的 把 握 能 力 。 这 了 听 起 来 是 不 是 有 点 夫 不 可 及 ? 
其 实 并 没有 你 想象 中 那么 难 ， 我 们 的 改变 和 突破 可 以 由 浅 入 深 地 开始 ,一步 一 步 ， 循 序 淘 进 地 完 成 。 在 接 
下 来 的 几 记 里 ， 我 们 会 从 上 述 的 4 个 方面 ， 分 别 以 成 功 的 设计 作品 为 案例 和 大 家 分 享 优秀 设计 师 的 经 验 。 


7.1.1 从 细 厂 蔡 换 入 手 


想 要 使 应 用 界面 达到 与 众 不 同 的 个 性 化 ， 我 们 首先 可 以 从 一 些 简单 的 细节 开始 。 

第 一 步 是 色彩 和 底 纹 。 让 我 们 先 来 看 一 看 移动 应 用 这 三 大 平台 的 原始 色调 〈 如 图 7-1 所 示 )，iOS 的 
蓝 灰 色 , Android 的 深 灰 色 , Windows Phone 的 纯 黑 色 , 友 现 了 吗 ? 一 个 比 一 个 稳重 和 深厚 , 用 意 很 明显 : 
一 个 是 在 视觉 上 不 喧 宾 夺 主 ， 使 用 户 把 注意 力 集中 到 内 容 和 图 片上 去 ; 另 一 个 就 是 给 设计 师 巨 大 的 修改 和 
突破 的 空间 。 因 此 ， 我 们 的 设计 和 改变 要 在 领会 好 上 述 这 两 个 用 意 的 前 提 下 进行 ， 也 就 是 说 ， 既 要 把 应 用 
的 色彩 个 性 或 纹理 表现 出 来 ， 又 不 能 太 过 突出 ， 使 用 户 的 注意 力 分 散 而 影响 阅读 和 操作 。 图 7-2 为 大 家 展 
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示 了 3 款 成 功 地 添加 色彩 和 搬 纹 的 案例 。 
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图 7-2 Windows Phone 平台 的 Podcast Lounge 左 图 )iOS 平台 的 PDF Expert 中 图 有 Android 平 台 的 Evernote 中 文 版 ' 右 图 ) 


Windows Phone 平台 的 Podcast Lounge 在 平台 规范 的 基础 上 ， 巧 妙 地 加 入 了 古色 古 香 的 传统 
图 案 底 纹 ， 使 这 款 首 乐 播放 应 用 在 具备 了 平台 风格 的 同时 充满 了 经 典 和 优雅 的 格调 ;Android 平台 的 
Evernote 中 文 版 则 是 通过 为 导航 栏 定义 了 一 块 鲜明 的 齐 绿 色 ， 使 这 款 应 用 充满 了 旅行 与 丛林 的 味 站， 不 
过 色 块 的 使 用 点 到 为 止 ， 绝 不 可 泛滥 ， 界 面 整 体 依然 透射 出 Android 经 典 的 深 灰 色 ; 而 iOS 平台 的 PDF 
Expert 应 用 ， 则 是 色彩 置换 和 抵 纹 修饰 的 完美 组 合 ， 尤 其 是 应 用 的 界面 背景 的 肌理 ， 让 用 户 从 视听 上 产 
生 丰 语 的 感官 效应 ( 亚 光 金 属 的 触摸 感 ) 有 创意 、 有 细节 、 有 个 性 。 这 3 款 应 用 巧妙 地 运用 了 色彩 置换 
或 纹理 湛 加 ， 只 是 在 平台 原生 规范 的 基础 上 稍 加 改动 ， 吾 市 来 了 非常 脱俗 和 精美 的 视 党 体验 。 

第 二 步 ， 我 们 可 以 从 图 形 和 字体 这 两 个 细节 为 切入 点 ， 把 应 用 的 元 素 个 性 体现 出 来 《如 图 7-3 所 示 )。 
对 于 字体 ， 我 们 可 以 从 标题 入 手 〈 最 好 不 要 轻易 改变 规范 字体 )， 对 于 图 形 ， 我 们 可 以 友 挥 自己 的 想象 力 
和 创新 能 力 设计 一 些 个 性 控件 。 这 个 过 程 对 设计 师 的 图 形 造 型 能 力 和 字体 把 握 能 力 有 所 考验 。 

Pulse News 是 一 款 很 有 个 性 的 新 闻 客户 并 ， 除 了 精彩 的 logo 设计 及 稳重 的 深 灰 色调 外 ， 对 图 形 的 
细节 设计 也 是 一 个 亮 上 尽 ， 标 位 上 的 纸张 掀 开 折 革 效果 很 有 质感 ， 这 个 小 小 的 个 性 化 细节 为 罕 面 的 整体 格调 
增色 不 小 。 而 iOS 平台 上 的 Flick pics 则 是 成 功 把 握 了 标题 上 的 字体 和 色彩 选择 ， 使 平淡 无 奇 的 界面 充满 
活力 。Windows Phone 平台 上 的 Trip Planner 应 用 的 视觉 个 性 可 以 说 是 一 目 了 然 。 仔 细 分 析 一 下 可 以 
皮 现 ， 它 在 平台 规范 上 所 作 的 改变 实际 上 非常 细小 ， 只 不 过 是 为 磁 贴 按钮 添加 了 市 有 明暗 淘 变 的 肌理 ， 而 
得 到 的 视 完 效果 却 非 常 与 众 不 同 。 这 种 添加 肌理 的 方法 在 下 一 步 的 设计 中 更 能 友 挥 出 奇效 。 
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7-3 Android 平台 的 Pulse News ( 左 图 )、iOS 平台 的 Flick pics (中 图 )、Windows 
Phone 平台 的 Trip Planner ( 右 图 ) 


7.1.2 添加 妆 衣 饰 、 纹理 和 特效 


对 细节 的 修改 和 茶 换 无 论 从 操作 和 构思 来 说 都 是 比较 简易 的 ， 同 时 效果 也 并 不 是 非常 活 出 的 ， 往 往 起 
到 画龙点睛 的 作用 。 接 下 来 ,我 们 束 要 在 界面 的 整体 效果 上 有 一 些 突破 了 。 于 先 , 丈 是 添加 材质 和 纹理 特效 ， 
这 种 设计 方式 在 iOS 平台 的 设计 中 尤为 突出 。 当 然 ， 对 另外 两 个 平台 应 用 的 界面 设计 也 很 有 帮助 。 示 例 图 
如 图 7-4 所 示 。 
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7-4 Android 平台 的 “Anyview”( 左 图 )、iPad 上 的 “计算 器 ( 中 图 )、Windows Phone 平台 的 “Get Reimbursed”( 右 图 ) 
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Android 平台 的 “Anyview” 和 Windows Phone 平台 的 “Get Reimpursed ”都 以 应 用 的 整体 风 
格 为 出 发 点 ， 为 界面 添加 了 极 具 个 性 的 肌理 和 材质 ， 同 时 重新 定义 了 界面 的 色调 ， 使 应 用 的 整体 视觉 效果 
显得 很 独特 。 而 iPad 上 “计算 器 ”中 的 视 涡 效果 ， 要 比 前 面 两 者 突出 得 多 ， 远 真 的 变 车 肌理 和 清晰 的 木 
制 弘 理 ， 使 应 用 的 视觉 体验 和 风格 品味 很 突出 。 这 种 处 理 方法 在 应 用 界面 设计 里 通常 被 称 为 “隐喻 ， 在 
视 涡 风格 上 我 们 也 称 它 为 “ 拟 物 化 风格， 后面 我 们 还 会 详细 介绍 这 种 视 竞 风格 。 因 此， 在 肌理 和 材质 的 
处 理 上 , 需要 把 握 的 尤为 细腻 , 尽 可 能 达到 视觉 上 的 触摸 感 , 这 也 是 体现 应 用 界面 的 格调 和 品味 的 显著 特征 ， 
只 是 对 设计 师 的 技术 要 求 要 高 一 些 。 

同时 ， 我 们 还 可 以 为 应 用 的 界面 添加 空间 和 立体 特效 。 无 论 是 控件 还 是 背景 ， 我 们 都 可 以 通过 绘图 软 
件 的 各 种 图 形 元 素 和 图 层 样式 ( 如 浮雕 、 阴 影 、 渐 变 和 光 汉 )， 细 致 打造 出 空间 感 、 层 次 感 和 立体 感 ， 示 
例 图 如 图 7-5 所 示 。 


7-5 iPad 上 的 “报刊 杂志 ”( 左 图 )Windows Phone 平台 的 “Control Your Weight”( 右上 图 ).Android 平台 的 “ES 文件 浏览 器 ” 
( 右 下 图 ) 

IOS 平台 上 的 “报刊 杂志 ”以 及 “iBooks ”应 用 不 但 实现 了 真实 的 空间 立体 效果 ， 而 且 配 上 细致 的 
木头 材质 和 丰富 的 阴影 ， 把 应 用 中 “ 拟 物 化 ”的 效果 用 得 超凡 脱俗 。Windows Phone 平台 的 “Control 
Your Weight” 应 用 也 巧妙 地 运用 了 空间 立体 效果 ， 给 Windows Phone 应 用 简约 朴实 的 界面 增添 了 一 
份 华丽 ， 尤 其 是 3 个 圆 形 导航 键 的 金属 边缘 处 理 ， 与 整体 的 立体 空间 效果 相 呼 应 ， 显 得 既 精 美 又 细致 。 
Android 平台 的 “ES 文件 浏览 器 ”的 空间 层次 感 处理 得 也 非常 成 功 ， 起 伏 效 果 简 约 大 方 ， 标 题 栏 、 导 航 栏 
和 文件 夹 间 的 关系 一 目 了 然 ， 无 论 从 风格 上 还 是 视觉 体验 上 都 散发 出 Android 应 用 的 味道 。 从 以 上 实例 中 
我 们 可 以 体会 到 ， 每 个 应 用 平台 都 有 适合 其 个 性 的 设计 语言 和 设计 思路 ， 隐 喻 、 浮 雕 以 及 三 维 空间 效果 都 
只 是 表现 手段 ， 优 秀 的 设计 师 可 以 巧妙 地 利用 这 些 特 效 手段 ， 探 索 出 适合 这 些 平台 的 表现 方法 和 视觉 语言 。 
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完成 了 对 材质 、 纹 理 及 空间 特效 的 进一步 修改 和 突破 后 ， 下 一 步 融 是 要 完全 抛弃 三 大 平台 的 设计 规 泄 ， 
设计 出 全 新 的 导航 万 式 、 探 件 样式 和 视 党 元 素 。 难 度 肯 定 会 加 大 ， 但 如 果实 现 了 ， 我 们 丈 真 正 意 义 上 地 达 
到 了 独树一帜 和 超凡 的 个 性 体验 。 


7.1.3” 纯 个 性 化 的 用 户 体验 设计 


我 们 所 说 的 “ 纯 个 性 化 ， 歹 是 要 抛弃 三 大 平台 的 设计 规范 和 标准 模式 ， 另 尽 蹊 径 地 设计 出 一 套 全 新 
的 视 党 和 交互 体验 ， 以 达到 绝对 的 独树一帜 和 个 性 设计 。 那 么 它 的 难度 束 不 再 仪 仅 是 细 古 的 把 握 、 特 效 的 
处 理 以 及 字体 和 色调 的 选择 了 ， 最 天 键 的 环节 了 苞 介 在 于 前 期 的 功能 结构 安排 和 创意 的 阶段 了 。 当 然 ， 纯 个 
性 化 的 目标 绝 不 是 否定 和 抛弃 应 用 平台 原 有 的 规 沁 ， 而 是 要 以 更 加 合理 、 更 加 有 效 和 更 加 独特 的 万 式 解 决 
应 用 目 身 的 内 容 特 性 和 功能 要 求 ， 同 时 纳入 适合 的 图 形 、 色 调和 字体 ， 增 强 界 面 的 视觉 体验 和 亲和力 。 

下 面 我 们 先 来 看 看 Android 平台 的 “NBC News” 客 户 端 ,如 图 7-6 所 示 。 由 于 新 闻 的 版 块 比 较 多 ， 
Android 平台 的 标准 导航 栏 无 法 适应 应 用 的 要 求 ， 设 计 师 的 天 赋 因 此 得 以 展现 ， 创 作出 了 这 种 极 襄 想象 
力 的 花 狼 形 的 导航 结构 ， 这 既 解 决 了 导航 问题 ， 又 达到 了 以 超 强 的 视 客 冲击 力 和 极 县 个 性 的 图 形 创 总 吸 
5 引 眼 球 的 目的 。 同 时 ， 单 击 新 闻 条 目 弹 出 的 Save 和 Share 的 控件 样式 也 很 具 个 性 和 想象 力 。 然 而 在 搬 
色 和 界面 细节 的 处 理 上 ， 仍 能 体会 到 Android 平台 的 味道 ， 真 正 做 到 了 既 能 独树一帜 ， 又 能 与 平台 的 特 
性 相 适 应 。 
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再 来 看 看 iOS 平台 的 “Swackett”( 一 款 天 气 预 报应 用 ) 和 “Transfer-File sharing 《一 款 文件 管 
理 和 收藏 应 用 )， 它 们 都 是 非常 普通 的 功能 型 应 用 ， 但 是 其 超 个 性 化 的 设计 结果 却 给 用 户 带 来 了 非常 轻松 、 
愉悦 的 独特 体验 ， 如 图 7-7 所 示 。Swackett 不 仅 能 从 界面 色调 上 体会 天 气 的 变化 ， 还 可 以 提示 你 佩戴 十 
上 有 具 和 注意 增 减 衣服 ， 清 新 的 色调 和 独特 的 界面 分 割 万 了 式 充 满 了 生活 气 妃 。Transfer-File sharing 则 是 使 
用 了 松散 、 凑 乱 的 布局 方式 ， 像 是 把 所 有 文件 散落 在 了 桌面 上 ， 通 过 在 页 面 上 随意 拖 动 来 找到 你 的 收藏 和 
文件 ， 还 可 以 把 它们 甩 出 昌 面 扔 摊 。 这 种 奇特 的 文件 管理 方式 确实 很 有 个 性 ， 使 具有 同样 个 性 和 生活 习惯 
的 用 户 非 党 着 迷 。 不 过 仔细 观察 细节 ,你 会 友 现 这 两 款 应 用 的 图 形 转 角 都 是 圆 角 ,这 当然 是 苹果 产品 的 特征 。 
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7-7 iOS 平台 的 “Swackett”( 左 图 ) 和 “Transfer-File sharing”( 右 图 ) 


以 上 几 款 应 用 都 是 个 性 化 用 尸体 验 设计 的 典范 ， 无 论 是 创意 还 是 细 记 处理， 都 充满 了 设计 师 的 天 才 想 
象 和 突破 精 昼 ， 因 此 ， 我 们 在 设计 应 用 产品 的 过 程 中 ， 既 要 有 规 泡 严谨 的 态度 ， 又 要 有 大 胆 尝 试 的 勇气 ， 
这 才 是 设计 局 手 应 该 有 具备 的 素质 和 状态 。 

接 下 来 ,我们 束 从 图 形 元 素 、 色 彩 规律 、 字 体 样式 和 空间 特效 这 4 个 万 面 ， 深 入 地 与 大 家 分 享用 户 体 
验 设 计 中 完善 界面 视 竞 设计 的 经 验 了 。 


7.2 图 形 元 素 与 构成 理念 


在 进一步 了 解 了 如 何 把 握 视 党 体验 之 前 ， 我 们 要 先 从 设计 最 基本 的 图 形 元 素 和 解决 页 面 布局 开始 ， 同 
时 谈 谈 如 何 更 好 地 把 握 两 者 的 关系 。 这 一 部 分 的 经 验 是 成 为 专业 设计 师 最 重要 的 基本 素质 。 
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7.2.1 图 形 元 素 是 界面 视 党 印象 的 根本 


首先 谈 一 下 界面 的 图 形 设 计 。 因 为 造型 是 一 切 视觉 印象 的 根本 ， 所 以 我 们 设计 出 来 的 界面 一 定 要 具备 
美观 而 严谨 的 图 形 元 素 。 因 为 窜 面 直接 影响 了 用 户 对 应 用 的 第 一 印象 ， 能 舍 把 握 好 界面 的 图 形 设 计 束 变 得 
尤 力 重要 。 下 面 我 们 就 先 来 看 看 三 大 平台 的 基本 图 形 的 样式 。 

不 仅仅 是 iOS 平台 的 界面 风格 ,苹果 公司 所 有 产品 的 图 形 风 格 ， 忌 的 来 说 都 是 非常 统一 和 鲜明 的 。 
通过 图 7-8 大 家 可 以 清晰 地 感 竞 到, 精致 的 圆 角 处 理 和 接近 椭圆 形 的 按钮 风格 是 它们 不 变 的 图 形 风 格 特点 。 
然而 ， 这 些 细小 的 圆 角 绝 不 像 看 上 去 那么 简单 ， 实 际 上 每 一 个 圆 角 的 细节 比例 关系 都 是 非常 考究 的 ， 因 此 
我 们 在 进行 相应 的 细 古 设计 时 ， 一 定 要 多 观察 、 多 模仿 、 多 安 试 。 


ow) 


7-8 ”苹果 公司 产品 的 图 形 元 素 


Android 平台 的 图 形 风 格 惑 不 像 竺 果 公 司 或 iDS 平台 那么 鲜明 。 从 图 7-9 中 可 以 看 到 ， 从 Android 
4.0 版 本 以 后 ， 图 形 基 本 上 都 采用 直角 处 理 ， 只 有 极 个 别 的 情况 下 会 市 一 绎 微小 的 圆 角 处 理 。 图 形 或 按钮 
的 下 侧 有 时 会 镶 藤 线条 和 代表 包含 下 拉 内 容 的 细小 三 角形 ， 显 得 精确 而 锋利 。 与 iOS 平台 的 圆 角 窍 形 分 割 
不 同 ，Android 平台 喜欢 使 用 单线 段 进行 分 割 ， 这 些 线段 在 分 割 男 面 的 同时 还 起 到 浅 饰 作用 ， 使 界面 看 上 
去 干净 利率 、 简 洁 大 万 。 而 线条 的 粗细 变化 是 一 个 要 点 ， 设 计 的 时 候 一 定 要 细心 观察 和 参考 。 
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7-9 Android 平台 的 图 形 元 素 


Windows Phone 平台 的 图 形 风格 也 是 非常 鲜明 和 独特 的 。 在 图 7-10 中 ， 我 们 看 到 了 非常 有 规律 的 
算 形 阵列 ， 绝 不 市 有 任何 圆 角 ， 排 斥 任 何方 式 的 细 万 修饰 ， 走 极 人 简约 和 局 平 化 的 设计 思路 。 导 般 栏 里 会 用 
小 圆 形 控件 进行 点 级 ， 大 小 对 比 强烈 ， 图 形 简单 大 气 ， 线 条 粗壮 有 力 。 在 设计 时 需要 注意 的 细节 是 各 种 和 矩 
形 的 长 宽 比 例 以 及 矩形 和 乱 形 之 间 缝 隙 的 宽度 ，Windows Phone 平台 在 这 两 个 方面 是 非常 考究 的 。 
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7-10 Windows Phone 平台 的 图 形 元 素 特点 
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通过 对 三 大 平台 图 形 元 素 风格 的 了 解 ， 我 们 理 清 了 为 各 个 平台 进行 图 形 设计 的 基本 思路 ， 那 瓯 是 要 企 
符合 它们 各 目 造 型 特点 的 前 提 下 ， 对 图 形 元 素 进行 调整 、 修 饰 和 创新 。 即 使 在 纯 个 性 化 的 设计 中 ， 也 要 在 
图 形 风格 上 做 到 有 据 可 和 寻 。 

从 图 7-11 中 我 们 看 到，3 球 不 同 平台 的 应 用 界面 设计 都 作出 了 个 性 化 的 创新 ， 但 是 在 图 形 元 素 上 也 
都 休 循 了 各 目 平 台 的 风格 特点 。 因 此 ， 即 使 整体 上 它们 各 目 平 台 的 特征 并 不 明显 ， 但 是 依然 能 够 从 界面 的 
细 证 中 体会 到 它们 各 目 所 属 的 平台 。 
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7-11 iOS 平台 的 “印象 笔记 一 食 记 ”( 左 图 )、Android 上 的 “Google+”( 中 图 )、Windows Phone 
平台 的 “Windows Phone News”( 右 图 ) 


当然 ， 设 计 图 形 元 素 时 ， 也 不 是 必须 遵守 规范 而 一 成 不 变 的 。 只 要 是 适合 应 用 的 功能 特点 和 界面 的 视 
区 需要， 同时 具备 丰富 的 想象 力 ， 我 们 完全 可 以 按照 自己 的 方式 重 塑 图 形 元 素 。 但 是 这 个 过 程 需要 设计 师 
具备 高 超 的 设计 品味 和 专业 的 细节 把 握 能 力 ， 最 起 码 能 达到 与 平台 原 有 的 图 形 设 计 不 相 上 下 的 水 准 ， 否 则 
设计 出 来 的 界面 会 显得 幼稚 和 粗糙 ， 使 得 整个 应 用 在 视 苋 上 给 人 的 感 匣 很 邹 质 。 成 功 的 案例 很 多 ， 我 们 在 
图 7-12 中 可 以 看 到 ，Android 平台 的 “MobileLife” 在 标题 栏 的 样式 上 进行 了 革新 ， 不 但 将 上 冰 的 两 个 
转角 改 成 了 圆 角 ， 而 且 加 入 了 一 个 精美 的 标 等 设计 ， 使 应 用 界面 整体 上 显得 美观 大 方 。Windows Phone 
平台 的 “3TV Phoenix News 不 但 为 列表 加 入 了 帝 有 图 标的 精美 底 图 ， 还 在 标题 栏 的 分 割 线 上 加 入 了 邮 
票 边缘 一 样 的 锯齿 设计 , 使 整个 界面 充满 了 活力 , 与 Windows Phone 平台 的 沉稳 风格 形成 了 鲜明 的 对 比 。 
而 iOS 平台 上 的 “uShetch”， 从 整体 风格 上 就 走 了 生活 化 和 轻松 愉 属 的 路 子 ， 图 形 细节 一 反常 态 地 使 用 
涂鸦 、 随 性 和 手工 绘制 的 效果 ， 配 上 精美 吉 真 的 相册 底 图 ， 使 应 用 看 起 来 很 时 尚 。 


~ 


第 7 章 视觉 体验 的 个 性 化 


| ] \ 和 i 
- 平 [| 0D b leLife 
3 3tv News 


Cw di st rt He 二 
tt .DD, Peoner Foy 


Th pl ol hen at ro 
ERR od WS de Li CH TS 

| hu reachd dh hah leant 

有 机 esr Ee rub doc Wr 


top stories 


Me 


Arlzona 
off beat 
walley 


natianal 


You Have Tyo Minutes? 
a FT Sh pF Cifi tsitis CET 


图 7-12 Android 平台 的 “MobileLife”( 左 图 )、iOS 平台 上 的 “uvuShetch”( 中 图 ) 和 Windows Phone 平 台 的 “3TV Phoenix 
News”( 右 图 ) 


由 此 可 以 看 出 ， 个 性 化 的 图 形 元 素 设计 首先 要 与 应 用 界面 的 整体 风格 相 匹 配 ， 同 时 设计 的 过 程 要 
有 创意 和 想象 力 ， 更 重要 的 是 细节 处 理 要 有 品位 和 格调 ， 这 样 才能 保证 我 们 的 界面 设计 达到 超越 规范 的 
水 惟 。 


7.2.2 ”页 面 布 局 与 构成 理念 


图 形 元 素 和 页 面 布 局 是 相互 依存 、 密 不 可 分 的 ， 只 不 过 大 部 分 人 在 打开 界面 的 同时 ， 都 会 被 图 形 、 文 
字 和 色彩 所 吸引 ， 而 不 会 注意 到 整体 的 布局 方式 和 构图 的 设计 ， 最 多 能 感觉 到 视觉 上 很 舒服 合理 ， 而 对 设 
计 师 的 精心 设计 和 非 几 创 意 往往 是 在 纯 个 性 化 的 设计 下 才能 够 有 所 体会 。 我 们 这 里 所 谈 的 布局 ， 主 要 是 与 
图 形 元 素 坚 密 相 关 的 页 面 布 局 ， 或 者 说 页 面 的 构图 形式 ， 其 中 包括 静态 页 面 和 功能 界面 。 那 么 ， 各 个 移动 
平台 在 处 理应 用 的 页 面 布 局 上 都 有 哪些 形式 呢 ? 

比较 通用 的 几 种 布局 方式 我 们 可 以 通过 以 下 的 几 组 原型 草图 和 案例 了 解 一 下 。 

在 图 7-13 中 ,我们 看 到 的 这 种 布局 和 构图 方式 称 为 列表 式 .这 是 最 简单 也 是 最 直观 的 一 种 布局 方式 ， 
以 从 上 至 下 的 顺序 递 进 排列 ， 可 以 在 中 间 插 入 图 片 或 视频 ， 也 可 以 把 图 片 和 标题 并 排放 置 ( 如 Windows 
Phone 平台 的 “Cocktall Flow”)， 但 大 的 秩序 不 能 紊乱 。 
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7 一 13 列表 式 布局 原型 图 ( 左 图 )、Windows Phone 平台 的 “Cocktall Flow”( 中 图 )、iOS 平台 上 的 “Foxit Mobile PDF”( 右 图 ) 


7-14 表现 的 布局 方式 称 为 “网 格式 ”或 者 “陈列 式 ” 布局。 顾名思义 ， 束 是 把 需要 使 用 的 工具 或 
需要 阅读 的 书刊 陈列 在 书 染 或 工具 柜上 , 以 万 便 拿 取 。 因 此 , 这 种 布局 万 式 的 优点 不 言 而 喻 , 束 是 查找 万 便 、 
操作 简单 。 我 们 看 到 三 大 平台 的 界面 都 使 用 了 这 种 方式 ， 说 明了 它 的 用 户 体验 价值 是 非常 高 的 。 列表 式 
和 “网 格式 ”这 两 种 布局 我 们 在 上 一 章 曾 经 作为 应 用 平台 的 规范 化 控件 提 到 过 ， 这 里 我 们 将 站 在 视觉 平衡 
和 构图 元 素 的 角度 上 分 析 它 们 的 个 性 化 趋势 。 


7-14 ”网 格式 布局 原型 图 ( 左 图 )、iOS 平台 上 的 “Voices 2”( 中 图 )、Android 平台 的 “WSJ Live”( 右 图 ) 
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我 们 通常 看 到 的 都 是 按照 图 7-14 这 样 以 九宫 格 万 式 整 芥 排列 的 ， 这 也 是 由 视 党 惯性 所 决定 的 ， 那 么 
如 果 稍微 打破 一 下 这 样 的 视 完 惯性 ， 将 它 的 分 割 万 式 重 新 定义 一 下 ， 也 许 会 出 现 很 独特 的 视 党 体验 。 如 图 
7-15 所 示 ， 我 们 为 大 家 提供 了 几 种 不 同 的 陈列 万 式 ， 它 们 从 视 党 上 打破 了 排列 的 稳定 性 。 昌 然 与 iOS 的 
界面 相似 ， 但 是 Android 平台 的 界面 上 可 以 安 沪 各 种 形状 和 大 小 的 “窗口 部 件 ， 打 破 了 iOS 界面 中 那 种 
形状 和 位 置 整 芥 划 一 的 陈列 万 式 和 视 膨 稳定 性 ， 从 而 得 到 了 独特 的 视 客 体验。 而 Windows Phone 的 界 
面 则 是 对 整体 的 画面 结构 进行 了 重新 分 割 ， 抛 弃 了 行列 分 明 、 面 积 平等 的 观念 ， 像 蒙 德 里 安 ( 从 兰 抽象 派 
画家 ) 一 样 把 画面 分 割 的 大 大 小 小 ， 文 离 破碎 ， 打 丰 了 空间 和 面积 的 稳定 性 ， 从 视 芝 上 达到 了 绝对 的 独 树 
一 帜 。iOS 平台 上 的 “uShetch ” 则 是 把 标签 松散 、 随 意 摆 放 在 界面 上 ， 配 上 手写 的 文字 ， 从 视觉 上 给 人 
轻松 、 浪 漫 和 生活 化 的 个 性 气 妃 。 
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7-15 Android 4.0 平台 界面 ( 左 图 )、Windows Phone 8 平台 主页 面 ( 中 图 )、iOS 平台 上 的 “uShetch”( 右 图 ) 


这 3 个 案例 都 清晰 地 向 我 们 传达 了 一 个 设计 上 的 观念 ， 那 融 是 “可 以 相似 ， 但 绝 不 能 雷同 。 昌 然 
iOS 界面 那 种 经 纬 分 明 的 布局 方式 已 经 成 为 “陈列 式 ” 布 局 的 常态 ， 但 是 我 们 还 能 在 它 的 基础 上 挖 握 出 不 
同 的 构成 万 式 和 视 腕 体验 。 不 过 ， 这 些 创意 看 似 简 里 ， 在 实现 过 程 中 是 非常 严谨 和 考究 的 ， 绝 不 是 随意 分 
割 和 摆 放 。 

图 7-16 和 图 7-17 表现 的 是 同一 种 导航 方式 的 两 种 构图 形式 ， 我 们 将 其 统称 为 “选项 卡 ” 布 局 。 
7-16 是 上 下 式 的 选项 卡 ， 也 束 是 导航 栏 安置 在 顶端 或 发 妆 ) 图 7-17 是 左右 陈 的 选项 卡 ， 也 残 是 把 导航 
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栏 安置 在 左 侧 或 右 介 ， 这 在 平板 电脑 上 比较 多 见 。 这 是 一 种 非常 弟 见 且 实 用 的 交互 万 式 ， 之 前 我 们 从 功能 
角度 前 述 了 它 的 优点 和 设计 万 法 ， 而 这 里 我 们 站 在 视觉 角度 上 谈 它 的 个 性 ， 那 束 是 标签 和 内 容 可 以 在 画面 
上 形成 大 小 呼应 和 图 形 对 比 ， 在 视 党 上 给 以 人 立体 交叉 的 空间 感 ， 是 非常 经 典 的 布局 万 式 ， 而 且 还 可 以 与 
前 面 的 两 种 布局 相 结 合 ， 增 强 用 户 的 交互 体验 。 


全 KW 人 ES 


bigfish946 


图 7-16 上 下 式 的 选项 卡 原型 图 ( 左 图 )、Android 平台 的 “通讯 录 〈 中 图 )、iOS 平台 上 的 “XnView Fx 《 右 图 ) 
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7-17 左右 式 的 选项 卡 原型 图 〈 左 图 )、Android 平台 的 “Dwell”( 中 图 )、iOS 平台 上 的 “Frequency”( 右 图 ) 


以 上 提 到 的 是 比较 常见 的 、 也 是 三 大 平台 经 常 使 用 的 布局 和 构图 万 式 ， 那 么 对 于 应 用 界面 设计 来 说 ， 
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布局 万 式 绝 不 仅仅 束 上 述 这 几 种 ， 更 多 的 布局 万 式 和 导航 模式 .等待 我 们 构思 和 创意。 在 这 里 ， 我 对 大 家 的 
建议 是 : 想 要 成 为 专业 的 设计 师 ， 必 须 了 解 “构成 ”的 理念 ， 因 为 这 是 现代 设计 的 基础 理论 。 

什么 是 “构成”? 那 束 是 把 相同 或 不 同 的 元 素 组 合 在 一 起 形成 新 的 事物 。 这 听 起 来 似乎 并 不 很 难 ， 但 
其 中 的 内 在 规律 、 组 合 万 式 和 细节 原理 是 非 昔 深 奥 和 庞杂 的 。 当 然 ， 这 里 我 们 不 可 能 把 它 的 原理 深入 完整 
地 讲解 清 茎 ， 我 们 的 目的 是 要 通过 “构成 ”的 理念 ， 创 意 和 完善 应 用 界面 的 视觉 体验 。 更 多 与 “构成 ” 相 
天 的 理论 , 我 们 可 以 通过 其 他 的 著作 或 方式 得 到 。 构成 ”分 成 三 大 方向 : 平面 构成 、 色 彩 构成 和 立体 构成 ， 
我 们 将 其 统称 为 “三 大 构成  。 最 早 的 理论 体系 是 在 20 世纪 初 德 国 的 “ 包 豪 斯 ”学 院 中 产生 的 ， 由 于 学 院 
的 讲师 、 著名 抽象 派 画家 康定 斯 基 的 一 部 著作 《点 、 线 、 面 》 而 得 名 。 在 本 节 里 , 我 们 依据 的 是 “平面 构成 
的 原理 ， 而 在 下 一 节 里 ， 我 们 会 谈论 “色彩 构成 ”的 理论 知识 。 

平面 构成 ”最 基础 的 原理 殉 是 , 在 一 个 平面 上 , 将 图 形 元 素 依据 不 同 的 骨骼 框架 进行 组 合 。 这 个 玉 
面 ” 就 是 移动 设备 的 界面 ， 这 个 “图形 元 素 ” 残 是 上 一 节 中 论述 的 内 容 ， 而 “骨骼 框 染 ” 丈 是 本 节 中 研究 
的 布局 方式 。 我 们 现在 要 构思 和 尝试 的 ， 束 是 把 一 堆 图 形 元 素 ( 图 标 、 标 签 和 按钮 ) 纳入 到 不 同 的 骨骼 框 
染 中 进行 排列 ， 有 多 少 种 骨骼 ， 束 有 多 少 种 排列 万 式 。 而 实际 上 ， 骨 骼 的 样式 是 无 穷 无 尽 的 ， 我 们 只 需要 
从 其 中 挑选 出 适合 我 们 界面 需要 和 功能 特点 的 束 行 了 。 图 7-18 残 是 平面 构成 中 常见 的 几 种 骨骼 样式 。 根 
据 这 些 图 形 线 框 ， 我 们 把 图 像 元 素 纳入 进去 进行 排列 ， 表 进行 一 下 细微 的 调整 和 特效 的 友 挥 ， 得 到 的 结果 
往往 是 起 乎 想象 的 创新 布局 。 不 但 骨骼 框架 的 样式 无 尖 ， 元 素 的 排列 万 式 更 是 直 晤 多 样 ， 所 以 只 要 我 们 理 
解 了 构成 的 理念 ， 选 择 好 正确 的 思路 ， 进 行 纯 个 性 化 创新 和 探索 并 不 困难 。 
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7-18 平面 构成 的 骨骼 样式 
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重复 骨骼 束 是 我 们 最 党 见 的 网 格 阵列 的 构图 万 法 ， 不 过 它 的 变化 可 是 非常 多 样 的 ， 只 要 我 们 把 图 形 元 
素 按 照 一 种 常态 或 惯性 进行 排列 都 属于 重复 骨骼 。 近 似 骨 能 是 在 重复 骨骼 的 基础 上 对 图 形 、 面 积 或 造型 进 
行 改变 ， 使 它们 相似 但 不 重复 。 特 异 骨 骨 则 是 在 重复 骨骼 的 基础 上 突然 产生 一 个 比较 大 的 达 异 ， 使 视 完 产 
生 突变 ， 这 几 个 骨骼 属于 比较 基础 和 实用 的 骨骼 框架 。 对 于 后 面 的 几 个 骨骼 ， 我 们 从 它们 的 名 称 字面 意思 
束 可 以 理解 它们 的 构图 形式 和 视 党 特 息 ， 它 们 属于 比较 另类 或 个 性 化 的 骨 骨 框 案 样式 。 

接 下 来 ,我 们 看 几 组 利用 相对 简单 的 骨骼 框架 进行 重 构 排列 的 布局 万 式 ， 从 中 可 以 清楚 地 体会 到 平面 
构成 理论 对 应 用 界面 的 布局 和 构图 市 来 的 奇效 ， 如 图 7-19 所 示 。 AppAdvice ”在 普通 的 重复 骨骼 上 箭 
加 改变 ， 在 元 素 排列 的 时 候 纵向 地 把 骨骼 错位 ， 打 破 了 排列 整齐 和 构图 单一 的 视觉 平衡 。 News Gallery 
则 大 胆 地 使 用 了 重复 和 近似 相 结合 的 骨骼 框架 , 把 文件 的 位 置 、 大 小 和 琉 密 关系 安排 得 错 藻 有致。 在 “Sky 
Grid ”应 用 中 扣 击 搜索 按钮 时 ， 弹 出 的 搜索 列表 占据 了 画面 的 视 党 中 心 ， 且 其 他 的 元 素 全 部 进入 阴影 中 。 
这 种 常见 的 模仿 窗口 处 理 万 法 符合 特异 骨 角 的 特征 。 当 然 ， 如果 需要 ,我 们 完全 可 以 把 这 种 视 完 特征 加 强 ， 
得 到 更 加 丰 蜗 的 视觉 变化 。 
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7-19 iOS 平台 上 的 “AppAdvice”( 左 图 ) “News Gallery”( 中 图 ) 和 “Sky Grid”( 右 图 ) 


接 下 来 ,我们 看 一 组 利用 相对 个 性 的 骨骼 框架 进行 排列 的 案例 ,如 图 7-20 所 示 。iOS 平 台 上 的 Reader 
HD” 以 及 前 面 图 7-6 中 Android 平台 的 “NBC News” 都 精彩 地 利用 了 发 散 骨 骼 ， 得 到 的 视觉 个 性 也 
非常 突出 。 这 个 骨骼 的 另 一 个 特点 就 是 可 以 带 来 运动 的 体验 效果 ( 旋转 或 友 射 ) 而 且 便于 导航 。 Mover+ 
与 图 7-7 的 Transfer-File sharing 应 用 相似 ， 都 利用 了 跻 密 骨 骼 的 重 琶 和 分 散 的 视 沉 特点 ， 体 现 出 
了 应 用 松散 和 随意 的 用 户 体验 个 性 。Android 平台 的 “Google Muisc Player” 是 同时 利用 渐变 与 空间 相 
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结合 骨骼 的 完美 典型 绚丽 的 三 维 空间 特效 极 大 地 增强 了 应 用 的 个 性 体验 ， 是 可 以 与 经 典 的 “ 拟 物 化 风 
格 相 匹 改 的 吨 一 种 个 性 化 视 殴 处 理 方式 。 
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7-20 iOS 平台 上 的 “Reader HD”( 左 图 ) 和 “Mover+”( 右上 图 )、Android 平台 的 “Google Muisc Player”( 右 下 图 ) 


7.2.3 ”处理 好 图 形 元 素 和 页 面 布局 间 的 关系 


了 解 了 图 形 元 素 的 重要 性 和 构成 理念 的 奇效 ， 我 们 的 设计 殊 变 得 轻松 和 有 条 理 了 。 下 面 束 把 我 们 精心 
设计 的 图 像 放置 于 变化 多 端的 骨骼 框 染 中 去 。 这 看 上 去 似乎 顺理成章 ， 但 是 操作 起 来 并 不 像 我 们 想象 的 那 
样 简单 。 我 们 一 定 要 清醒 地 认识 到 ， 完 美的 设计 绝 不 音 单 是 靠 巧 妙 的 构思 和 非凡 的 创 晶 ， 还 有 一 个 非 剃 重 
要 的 也 是 决定 性 的 因素 ， 那 残 是 细节 把 握 。 

在 成 为 专业 设计 师 的 修炼 之 路 上 ,， 很 多 经 验 和 技术 是 需要 很 长 时 间 的 扣 索 和 很 多 案例 的 积累 的 ， 因 此， 
在 处 理 设计 细 万 的 时 候 ， 我 们 要 多 以 经 典 的 成 功 守 例 作 为 依据 ， 耐 心 观 察 ， 仔 细 括 摩 。 现 在 我 们 需要 解决 
的 是 怎样 合理 地 把 图 形 元 素 放 置 在 骨骼 框架 里 ， 也 束 是 如 何 把 握 好 图 形 和 布局 之 间 的 关系 。 下 面 我 们 先 通 
过 图 7-21 所 示 的 几 个 成 功 案例 来 体会 一 下 成 功 的 设计 高 手 是 怎样 搞定 的 。 

App Store ”也 许 是 大 家 最 经 党 使 用 的 iOS 应 用 ， 无 论 打开 过 多 少 次 ， 能 有 几 个 人 会 留意 到 这 款 应 
用 的 经 典 细节 了 呢 ? 在 非常 简单 的 重复 排列 下 ， 每 一 个 “应 用 卡片 ”之 间 都 留 有 大 约 20 像素 的 缝隙 ， 这 个 
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缝隙 不 宽 也 不 窒 ， 恰 到 好 处 ， 使 界面 上 每 一 个 单元 格 之 间 既 整体 又 相互 独立 。 配 上 iOS 特有 的 圆 角 边缘 
和 阴影 特效 ， 画 面 的 立体 效果 加 强 ， 每 个 “应 用 卡片 ” 弹 起 在 空中 ， 等 待 用 户 来 点 击 。 如 果 你 更 加 细致 地 
揣摩 ， 会 发 现 圆 角 的 比例 和 阴影 的 深浅 都 是 非常 考究 、 恰 到 好 处 的 ， 试 着 用 软件 把 它们 临 莫 一 下 绝对 让 你 
受益 菲 浅 。Windows Phone 平台 的 “ProShot 是 一 款 相 机 应 用 ， 采 用 特异 骨骼 ， 界 面 网 格 分 割 使 用 的 
是 很 淡 且 极 细 的 经 纬 线 ， 使 画面 看 起 来 非常 细致 和 和 精密。 为 了 不 破坏 画面 的 整体 感 ， 界 面 上 几 个 控件 的 透 
明度 都 调节 得 很 淡 ， 不 但 使 屏幕 得 到 最 大 限度 的 使 用 ， 还 增强 了 体验 的 个 性 化 。Android 平台 的 “Solia 
Explorer ”更 是 一 款 值 得 我 们 从 细节 上 认真 观察 和 学 习 的 应 用 。 使 用 单线 段 而 不 是 交叉 线 来 分 割 界 面 是 
Android 平 台 视 党 上 的 通用 方式 ,然而 线段 本 身 的 样式 却 是 很 值得 推 宫 和 选择 的 如 图 7-9 所 示 )。 在 Solia 
Explorer” 界 面 上 ， 我 们 可 以 看 到 设计 师 是 怎样 处 理 线段 的 ， 这 是 一 种 立体 划 痕 的 效果 ， 线 段 两 端 逐 渐 收 
紧 表 现 出 刀片 在 纸张 上 划 过 的 效果 。 由 于 过 于 细 胜 以 至 于 无 法 看 得 很 清楚 ， 但 是 在 界面 整体 上 映射 出 了 非 
常 舒 服 和 整洁 的 视觉 效果 ， 体 现 出 了 设计 师 专 业 的 细节 把 握 能 
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7-21 iOS 平台 上 的 “App Store”( 左 图 )、Windows Phone 平 台 的 “ProShot”( 右上 图 )、Android 平台 的 “Solid Explorer” 
〈 右 下 图 ) 


通过 对 以 上 3 球 应 用 的 分 析 ， 我 们 明日 了 在 应 用 用 尸体 验 设 计 中 创意 和 细节 的 关系， 创意 成 藉 了 好 的 
构思 ， 而 细节 则 决定 了 成 败 。 有 多 人 少 个 应 用 由 于 粗糙 的 局 部 处 理 而 荆 送 了 优秀 的 创 晶 ， 而 很 多 平淡 无 奇 的 
构思 由 于 精彩 的 细 万 处 理 而 登 上 经 典 之 列 ， 示 例 图 如 图 7-22 所 示 。 对 于 应 用 界面 来 说 ， 图 形 和 布局 容易 
确定 ， 但 它们 之 间 的 关系 和 细节 处 理 才 是 设计 师 需 要 不 断 推 客 和 把 握 的 。 
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7-22 iOS 平台 上 的 “Vital Signs DB”( 左 图 )、Android 平台 的 “Google Currents”( 中 图 )、Windows 
Phone 平台 的 “Phototastic”( 右 图 ) 


7.2.4 ”同一 球 应 用 在 不 同 的 平台 和 设备 上 


这 是 一 个 非常 容易 忽视 的 问题 。 我 们 经 党 看 到 有 些 设 计 师 对 上 自己 的 应 用 没 做 任何 修改 ， 和 直接 从 iOS 
平台 上 移植 到 Android 平台 的 设备 里 。 这 从 表面 看 上 去 似乎 没什么 问题 ， 使 用 起 来 也 可 以 很 顺手 ， 但 是 这 
样 做 是 存在 很 多 问题 的 。 

目 先 , 每 个 平台 设备 的 使 用 方法 不 一 样 , 这 在 4.1 节 里 丈 详 细 前 述 过 。 由 此 束 产 生 了 很 多 的 连 市 问题 ， 
下 先是 导航 栏 的 项 目 需要 调整 。 我 们 知道 iOS 平台 的 设备 是 没有 返回 键 的 ,因此 必须 在 导航 栏 里 加 以 补充 。 
同时 两 个 平台 的 按钮 和 控件 样式 不 同 ， 如 果 不 加 修改 ， 很 可 能 会 造成 误解 ， 从 而 市 来 很 多 麻烦 。 最 后 ， 每 
个 平台 的 规 泡 和 理念 不 一 样 ， 里 然 我 们 可 能 是 纯 个 性 化 应 用 ， 但 是 从 理念 上 还 是 要 符合 相关 平台 的 细 证 处 
理 和 理念 ， 人 否则 使 用 户 感 到 不 伦 不 类 或 者 产生 很 山寨 的 印象 。 因 此 ， 我 们 一 定 要 注意 ， 在 不 同 平台 之 间 移 
植 的 时 候 要 根据 每 个 平台 的 规范 和 特色 重新 设计 ， 包 括 它们 的 图 标 ， 示 例 图 如 图 7-23 所 示 。 

男 一 个 需要 注意 的 问题 束 是 ， 同 一 款 应 用 在 同一 个 平台 的 不 同 设备 上 移植 的 时 候 也 需要 重新 设计 ， 这 
里 主要 是 指 把 手机 设备 上 的 应 用 移植 到 平板 电脑 上 去 。 由 于 手机 屏 带 比较 狭小 ， 界 面 上 的 各 种 元 素 相对 拥 
挤 和 堆积 ， 如 果 把 它 直 接 放 大 到 平板 电脑 的 屏 有 居 上 ， 所 有 的 元 素 中 会 区 得 曼 芝 和 粗糙 ， 因 此 ， 我 们 必须 将 
所 有 的 元 素 重 新 放置 和 排列 。 这 时 我 们 完全 可 以 把 原 有 的 设计 推翻 ,设计 一 款 内 容 和 元 素 更 加 丰 定 、 更 适 
合 平板 电脑 的 界面 。 
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7-23 “印象 笔记 ”应 用 在 iOS 平台 ( 左 图 ) 和 Android 平 台 ( 右 图 ) 上 


从 图 7-24 中 可 以 看 到 ，“ 日 历 ” 应 用 在 iPhone 和 iPad 上 的 界面 设计 可 以 说 是 大 相 径 庭 ， 几 乎 没有 
相同 之 处 ， 谁 能 想到 它们 会 是 同一 款 应 用 ? 因此 我 们 得 出 结论 ， 无 论 是 设备 之 间 还 是 平台 之 间 ， 对 应 用 进 
行 移植 的 时 候 ， 在 设计 上 一 定 不 能 偷懒 ， 一 定 要 根据 情况 做 出 最 适合 用 户 和 移动 设备 的 设计 。 
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图 7-24 “日 历 应 用 在 iPhone 和 iPad 上 的 界面 设计 
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7.3 ”应 用 界面 的 色彩 因素 


对 于 移动 应 用 的 用 尸体 验 设 计 ， 色 彩 的 重要 性 是 不 谨 而 喻 的 。 因 此 ， 这 个 环节 对 于 我 们 能 舍 完 成 充满 
视 萝 吸引 力 和 个 性 鲜明 的 应 用 界面 至 天 重要 。 当 然 ， 这 个 过 程 我 们 也 要 由 浅 入 深 、 循 序 渐 进 地 完成 。 针 对 
没有 设计 和 美术 基础 的 读者 ， 我 们 会 移 简要 前 述 一 下 使 用 色彩 的 基本 原理 和 拉 巧 。 


7.3.1 了 解 色彩 的 规律 


人 类 可 以 分 辨 的 色彩 可 以 说 是 无 祁 无 尽 的 ， 能 够 在 移动 屏 需 上 显示 的 色彩 也 以 百 万 计 。 无 论 能 看 到 多 
少 种 色彩 ， 它 实际 上 都 是 由 3 个 颜色 的 光 交 映 混合 而 成 的 ， 也 残 是 我 们 所 说 的 “光谱 三 原色 ， 这 是 针对 
设备 的 成 像 原 理 而 说 的 。 而 现在 要 讨论 的 色彩 搭配 理论 知识 是 建立 在 “物理 三 原色 ”的 基础 上 的 ， 这 也 是 
我 们 分 析 和 推理 色彩 结构 的 起 点 。 色 彩 的 三 原色 如 图 7-25 所 示 。 


红 


光谱 三 原色 物理 三 原色 
7-25 色彩 的 三 原色 
红 、 绿 、 蓝 三 原色 之 间 洁 足 而 立 ， 它 们 可 以 相互 交融 、 相 互 过 渡 。 我 们 把 这 3 个 颜色 以 及 它们 之 间 的 
过 渡 色 相互 连接 ， 形 成 了 一 个 色相 环 ， 如 图 7-26 所 示 。 色 相 环 里 包含 了 所 有 的 颜色 ， 但 只 限于 颜色 的 基 


本 属性 ， 我 们 称 之 为 “色相 ， 也 残 是 颜色 的 相 狐 。 干 万 别 小 看 这 个 色相 环 ， 它 是 我 们 之 后 进行 色彩 选择 
和 搭配 很 重要 的 的 参考 工具 和 对 照样 本 。 


八 半 OO 


图 7-26 色相 环 的 形成 
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色相 环 上 的 每 一 个 色相 都 有 两 个 友 展 趋势 : 一 个 是 明暗 ， 逐 渐变 亮 成 为 日 色 或 者 逐渐 变 暗 成 为 黑色 ， 
男 一 个 是 纯度 ( 也 称 饱和 度 )， 残 是 逐渐 银色 区 成 灰色 。 这 两 个 属性 可 以 通过 Photoshop 里 的 “色相 / 饱 
和 度 ” 对 话 框 来 体会 ， 如 图 7-27 所 示 。 通 过 这 两 个 变化 的 运动 友 展 趋 势 ， 我 们 丈 得 到 了 一 个 球状 立体 的 
色谱 ， 我 们 把 它 称 为 “ 色 立 体 ， 如 图 7-28 所 示 。 


全 2 人 


预 设 : | 默认 值 


7-27 Photoshop 里 的 “色相 /饱和 度 ” 对 话 框 


明暗 度 


图 7-28 名 立体 (该 图 片 来 自 维基 百科 ) 


我 相信 ， 除 了 最 终 的 色 立 体 ， 整 个 色彩 体系 结构 是 很 容易 掌握 的 。 而 擎 握 色 立 体 的 诀 突 区 是 ， 以 色 环 
为 基础 ， 所 有 的 头 色 在 同 圆 心 友 展 的 过 程 友 生 纯 度 变 化 ， 也 残 是 逐渐 褪色 变 成 灰色 ;同上 友 展 逐渐 加 亮 变 
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成 日 色 , 问 下 友 展 逐渐 变 瞳 变 成 黑色 。 由 于 圆心 的 色彩 已 经 完全 银 挥 ,所 以 成 为 了 日 色 到 黑色 的 渐变 ,日 色 、 
黑色 以 及 它们 之 间 过 渡 的 各 种 灰色 我 们 统称 为 “无 彩色 。 

这 样 ， 我 们 残 把 色彩 的 类 识 体系 完整 呈现 给 大 家 了 。 下 面 束 是 如 何 利 用 这 个 色彩 体系 来 充实 到 我 们 的 
应 用 界面 设计 里 了 。 


7.3.2 ”善于 把 握 色 调 


下 移 我 们 要 了 明确 一 个 观点 ， 色 彩 设 计 的 本 质 并 不 是 添加 颜色 ， 而 是 控制 总 色 。 有 具体 地 讽 ， 在 一 个 界面 
中 并 不 是 颜色 越 多 越 好 看 ， 这 是 初学 者 最 容易 犯 的 锯 误 。 因 为 闫 色 越 多 ， 看 上 去 区 越 眼花 综 乱 ， 反 而 不 容 
易 给 用 尸 留 下 深刻 的 印象 。 擎 握 色 彩 设 计 最 关键 的 丈 是 ， 要 学 会 把 握 住 色调 。 色 调 的 意思 丈 是 使 色彩 在 视 
兄 上 形成 统一 。 不 管内 容 多 充 天 ， 变 化 多 丰 蜗 ， 我 们 都 从 视 宫 上 把 它们 约束 在 一 个 色彩 沁 围 里 ， 这 样 才能 
保持 住 窜 面 的 整体 风格 和 个 性 化 的 特征 。 拒 握 住 色调 最 简单 的 办 法 束 是 只 用 一 个 颜色 来 设计 ， 如 图 7-29 
所 示 。 
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图 7-29 0 平台 的 “Walkman”( 左 图 )、iOS 平 台 上 的 “Things”( 中 图 )、Windows Phone 平台 的 “Connectivity Tiles” 

这 3 款 应 用 都 通过 定义 一 个 鲜明 或 蛙 纯 的 颜色 ， 达 到 了 应 用 界面 的 个 性 化 。 由 于 色调 纯粹 而 统一 ， 给 
用 户 留 下 了 深刻 的 色彩 印象 。 在 此 说 明 一 下 ,在 色彩 设计 的 过 程 中 ,一 般 不 把 之 前 提 到 的 “无 彩色 ( 黑 \ 白 、 
灰 ) 当 作 颜色 来 考虑 ， 但 是 它们 在 对 色彩 进行 陪衬 和 分 割 时 所 起 的 作用 却 是 至 关 重 要 的 ， 这 在 后 面 的 内 容 
里 会 进一步 介绍 。 在 此 案例 中 我 们 也 能 够 体会 到 ， 在 无 彩色 的 宰 托 下 色彩 更 加 鲜明 和 具有 个 性 。 

然而 过 于 单一 的 色彩 有 时 会 使 界面 不 够 丰富 ， 或 者 对 界面 中 的 各 种 元 素 缺 之 表现 力 ， 此 时 我 们 可 以 在 
保持 住 色调 的 基础 上 使 色彩 逐渐 丰富 起 来 ， 其 中 一 个 万 法 束 是 在 基础 颜色 上 调整 它 的 明暗 度 或 纯度 ， 示 例 
图 如 图 7-30 所 示 。 
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7-30 Android 平台 的 “New York City Guide”( 左 图 )、iOS 平台 上 的 “SBS World News”( 中 图 )、Windows Phone 平台 的 
“News360 ”( 右 图 ) 


Android 平台 的 “New York City Guide” 和 iOS 平台 上 的 “SBS World News” 都 是 通过 改变 
基础 颜色 的 明暗 度 达 到 细微 的 色彩 变化 的 。 而 Windows Phone 平台 的 “News360” 则 是 在 基础 颜色 的 
纯度 上 做 文章 ， 使 色调 变 得 深 斑 而 厚重 。 由 于 增加 了 色彩 变化 ， 界 面 中 的 各 种 元 素 明显 丰 时 活跃 多 了 。 在 
保持 住 色调 的 基础 上 丰富 色彩 的 另 一 个 思路 就 是 尝试 使 用 “邻近 色 或 “相似 色 。 邻近 色 和 相似 色 、 
都 是 针对 色 环 而 言 的 ， 顾 名 思 义 ， 就 是 在 色 环 上 邻近 的 或 相似 的 颜色 ， 如 图 7-31 所 示 。 


图 7-31 “邻近 色 ” 和 “相似 色 ” 


“邻近 色 ” 一 般 在 色 环 上 挨 得 比较 近 ， 因 此 色彩 的 差异 比较 细微 。 相似 色 ” 相 对 来 说 远 一 点 ， 只 要 不 
超过 90 度 都 可 以 ， 色 彩 大 . 异 比邻 近 色 和 大 一 些 。 由 于 在 色 环 上 的 位 置 都 彼此 接近 ， 所 以 这 些 颜色 看 上 去 
比较 相像 ， 从 而 有 力 地 保障 了 界面 色调 的 统一 性 。 通 过 图 7-32 所 示 的 三 款 应 用 的 界面 ， 我 们 可 以 很 明显 
地 体会 到 这 一 
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7-32 iOS 平台 上 的 “Trip Journal”( 左 图 )、Windows Phone 平台 的 “Tech News Now”( 中 图 )、 
Android 平台 的 “Anyview”( 右 图 ) 


现在 大 家 已 经 理解 了 把 握 色 调 的 用 意 ， 也 学 会 了 控制 色调 的 万 法 ， 最 关键 的 是 要 有 建立 应 用 界面 的 区 
体 色 调 的 观念 。 有 了 它 ， 我 们 的 界面 设计 最 起 码 不 会 在 色彩 方面 出 现 问题 ， 更 重要 的 是 可 以 理性 和 严谨 地 
规划 我 们 的 应 用 界面 的 个 性 化 设计 。 

但 是 有 人 可 能 会 本， 总 是 航 约 束 在 一 个 色调 里 是 不 是 太 单调 、 有 死板 了 ， 界 面 的 色彩 印象 和 视 竞 风格 是 
得 到 了 加 强 ， 但 还 是 咒 得 有 些 过 于 人 保守。 当然， 应 用 的 色调 丰 遇 与 售 主 要 还 是 由 应 用 本 身 的 市 场 定 位 及 用 
尸 群 决定 的 ， 但 是 从 设计 的 角度 来 涡 ， 我 们 的 色彩 把 握 绝 不 仪 仅 停 留 在 单一 色调 的 范围 内 。 下 一 步 ， 我 们 
要 继续 让 色彩 丰富 起 来 ， 让 界面 活跃 起 来 。 


7.3.3 丰 晶 的 色彩 ， 严 谨 的 挫 配 


对 应 用 界面 进行 色彩 设计 时 ， 尽 量 不 要 打破 画面 色调 的 统一 性 ， 否 则 很 容易 弄巧成拙 ， 使 男 面 变 得 富 
无 主题 、 竣 乱 不 堪 。 但 是 很 多 情况 下 ， 由 于 功能 、 用 尸 以 及 市 场 的 需要 ， 我 们 不 得 不 打破 色调 的 统一 性 来 
追求 更 丰 昌 、 更 活跃 的 视 咒 体验。 当然 , 这 对 设计 师 的 视 竟 品味 和 色彩 把 握 能 力 要 求 更 局 , 难度 也 不 言 而 喻 。 
接 下 来 ， 我 们 通过 一 系列 实用 的 思考 万 法 和 拉 七 ， 壬 试 着 一 步 一 步 地 打破 色调 的 约束 。 

1. 焦点 反差 

由 于 功能 或 应 用 结构 的 需要 ， 我 们 经 党 需要 在 界面 中 突出 一 些 局 部 或 者 细节 元 素 ， 达 到 提示 、 党 告 等 
作用 ， 这 时 我 们 不 得 不 选择 一 个 非常 醒目 的 闸 色 来 达到 效果 。 这 样 束 完 全 打破 了 色调 的 统一 性 。 其 实 ， 问 
题 的 关键 在 于 色彩 区 域 的 大 小 和 对 比 ， 我 们 只 对 局 部 和 细 证 进 行 突 出 ， 如 果 色 彩 选 择 得 当 ， 不 但 不 会 破坏 
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画面 ， 还 能 对 画面 的 整体 效果 起 到 “画龙点睛 ”的 作用 ， 示 例 图 如 图 7-33 所 示 。 


净 


图 7-33 Android 上 的 “设置 ”功能 ( 左 图 )、iOS 平台 上 的 “Where to?”( 中 图 )、Android 平台 的 “Ski 
& Snow Report”( 右 图 ) 


我 们 看 到 ， 这 3 款 应 用 都 对 局 部 的 控件 或 标签 使 用 了 与 整体 色调 完全 相反 的 颜色 ， 使 它们 看 上 去 非常 
醒目 ， 突 出 了 相应 功能 的 重要 性 。 这 里 一 定 要 注意 ， 想 要 色彩 突出 ， 就 要 有 鲜明 的 对 比 ， 除 了 颜色 本 身 的 
色相 对 比 (如 Android 平台 的 “Ski & Snow Report”), 还 要 有 明暗 上 的 对 比 ( 如 iOS 平台 上 的 “Where 
to?”) 和 纯度 上 的 对 比 ( 如 Android 上 的 “设置 ”功能 )， 这 样 才 能 真正 起 到 “画龙点睛 ”的 作用 。 

2. 双色 调 

刚才 我 们 谈 到 了 色彩 的 对 比 ， 其 中 明暗 的 对 比 和 纯度 的 对 比 都 很 容易 理解 ， 但 是 色相 的 对 比 需 要 特别 
说 明 一 下 。 因 为 对 于 无 穷 无 尽 的 色彩 来 说 ， 哪 两 个 色彩 放 在 一 起 能 得 到 鲜明 的 对 比 效果 ， 如 果 没有 科学 的 
分 析 ， 这 是 很 含混 的 。 我 们 在 色相 环 上 把 这 种 情况 归结 为 “互补 色 ” 和 “对 比 色 ”两 个 概念 ， 如 图 7-34 
所 示 。 


图 7-34 “互补 色 和 对 比 色 
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互补 色 ” 殊 是 在 色 环 上 两 极 相对 的 一 组 颜色 ， 也 就 是 180 度 上 的 两 个 颜色 ( 如 图 7-34 中 图 所 示 )， 
这 是 色彩 对 比 的 极端 化 。 也 束 是 说 ， 在 确定 了 一 个 头 色 的 前 提 下 ， 想 得 到 与 它 对 比 最 强烈 的 另 一 个 颜色 ， 
只 需要 在 色 环 上 找到 与 它 正 对 的 颜色 。 而 其 他 的 大 于 90 度 小 于 180 度 的 各 组 颜色 , 我 们 统称 为 “对 比 色 
( 如 图 7-34 左 图 和 右 图 所 示 )。 角度 越 接近 180 度 ， 对 比 残 越 强 烈 。 

掌握 了 色相 的 规律 , 我 们 就 可 以 大 胆 地 打破 单一 的 色调 , 交 试 在 画面 上 使 用 “双色 调 “ 了 。 也 惑 是 这 ， 
为 了 得 到 比较 强烈 的 视 帝 冲击 力 和 超 个 性 的 界面 设计 效果 ， 我 们 可 以 选择 一 对 比较 强烈 的 对 比 色 长 全 互补 
色 来 宛 实 我 们 的 界面 ， 用 两 个 色调 在 界面 上 区 相 呼 应 ， 示 例 图 如 图 7-35 所 示 。 但 是 在 这 个 过 程 中 ， 也 要 
注意 尽量 保持 住 每 个 色调 的 相对 统一 和 元 整 。 


my Notes 


Lovely1 Miftfy!! 


Amazing ltalian restaurant 
gluten-free past 一 “5， 
soft music, ovet lian wines. 
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Travel arrangements: 


7-35 iOS 平台 上 的 “NOTE d”( 左 图 ) 和 “Game Center”( 中 图 )、Windows Phone 平台 的 “Mail.Ru”( 右 图 ) 


由 于 使 用 了 两 个 对 比 度 比较 强烈 的 颜色 ， 我 们 就 要 在 色彩 的 明暗 度 和 纯度 上 做 一 些 改变 ， 否 则 的 话 ， 
过 于 强烈 的 对 比 会 使 用 户 感到 紧张 、 浮 躁 ， 而 且 容 易 喧 宾 夺 主 ,减弱 了 应 用 的 功能 和 内 容 。 我 们 可 以 通过 
调 暗 一 个 色调 亮度 来 衬托 另 一 个 色调 ， 使 它 更 加 鲜明 ( 如 Windows Phone 平台 的 “Mail.Ru ), 或 者 同 
时 降低 两 个 色调 的 纯度 来 烘托 界面 上 的 其 他 元 素 ( 如 iOS 平台 上 的 “Game Center”)， 也 可 以 同时 加 强 
或 者 减弱 两 个 色调 的 亮度 ， 达 到 与 界面 主体 内 容 的 统一 ( 如 iOS 平台 上 的 “NOTE,d )。 总 之 ， 不 要 让 这 
两 个 色调 针锋相对 、 各 自 独立 ， 而 要 让 它们 之 间 和 谐 相处 、 相 互 衬 托 。 如 果 能 做 到 ， 那 别 说 是 两 个 色调 ， 
几 个 色调 都 可 以 控制 得 游 力 有 余 。 

3. 色彩 融合 

下 面 我 们 就 谈 谈 如 果 将 更 多 的 颜色 加 入 到 你 的 界面 上 ， 该 如 何 应 对 和 把 握 。 在 处 理 “ 双 色调 ”时 我 们 
谈 到 了 ,通过 同时 降低 各 个 颜色 的 纯度 , 或 同时 增加 或 者 降低 它们 的 明暗 度 , 可 以 达到 多 个 颜色 的 和 谐 统 一 ， 
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因此 现在 惑 要 把 注意 力 专注 在 色彩 的 明暗 和 纯 硫 的 区 化 和 调和 上 了 。 
通过 图 7-36 所 示 的 3 个 案例 我 们 可 以 体会 到 ， 随 着 颜色 的 增多 ， 我 们 对 色彩 纯度 和 明暗 度 的 调 证 需 
要 更 加 细 肝 和 多 样 。 里 然 看 上 去 是 同时 增加 亮度 或 降低 纯度 ， 但 是 真正 调节 的 时 候 ， 一定 要 分 别 把 握 ， 局 
部 控制 。 不 但 是 颜色 本 身 的 变化 ， 每 块 颜色 之 间 的 搭配 和 面积 天 系 也 要 反复 推 襄 、 细 致 调整 ， 使 它们 之 间 
明暗 搭配 ， 对 比 鲜明 ， 相 互 讨 托 。 
rp 


TweetDeck is now officially: 
soon,. 


TweetDeck Batcave 
加 


Check out this cute dog coat I 
just bought for my dog! 


加 1 直 3 恒 : 


The excitement level in here is 
Insane. 


pocket-lint 


windows roundup kK 


PANAWANISAC AM 


和 
图 7-36 Android 上 的 “TweetDeck”( 左 图 ) JiOS 平台 上 的 “Patchworkz ! ”游戏 (中 图 ) Windows Phone 平台 的 “Windows 
Phone News”( 右 图 ) 


毕 竞 把 很 多 颜色 放 在 一 起 非 冲 亡 乱 ， 也 是 极 难 控制 的 ， 那 么 有 没有 什么 诀 穷 或 者 捷径 ， 能 够 简单 快速 
地 把 这 么 多 颜色 和 谐 地 放 在 一 起 ， 又 不 会 相互 干扰 造成 色调 不 和 谐 呢 ? 现在 告诉 大 家 一 个 很 有 效 的 万 法 ， 
那 束 是 充分 利用 黑 、 白 、 灰 ， 也 残 是 “无 彩色 。 前 面 我 们 提 到 ， 任 何 颜色 都 可 与 无 彩色 进行 搭配 ， 而 且 
可 以 把 它们 反衬 得 很 好 看 。 黑 色 可 以 把 颜色 衬托 得 很 鲜艳 ， 而 日 色 可 以 使 闫 色 显得 很 稳重 。 因 此 ， 无 论 界 
面 中 有 多 少 种 颜色 ， 我 们 只 要 用 黑色 、 日 色 或 不 同 深 浅 的 灰色 把 它们 分 开 ， 使 它们 彼此 隔离 ， 而 又 都 与 无 
彩色 进行 搭配 ， 这 样 就 可 以 轻易 地 达到 色彩 之 间 的 协调 与 搭配 了 。 

从 图 7-37 的 3 个 案例 中 我 们 可 以 看 到 ， 无 彩色 在 调和 色彩 关系 中 起 到 的 奇效 。 我 们 甚至 不 必 过 多 地 
调 证 每 个 颜色 的 纯度 和 明暗 度 ， 因 为 任何 色彩 在 无 彩色 面前 都 是 非常 鲜明 的 。 不 过 即使 这 样 ， 我 们 也 要 根 
据 应 用 的 实际 情况 使 用 颜色 ， 不 要 一 味 地 追求 色彩 的 丰 语 和 变化 ， 因 为 这 样 很 容易 适得其反 ， 把 界面 变 得 
写 无 主题 或 硫 乱 不 堪 。 
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Select up to 5 topics that interest you the most: 


© Tech @ Entertainment 冉 Comedy 


BD 5ports @ Movies @ App; 


加 Nosi BVirol Video 


@ Scionce -ood 四 Siyle 


要 Windows Phone 8 


7-37 Android 上 的 “Circle”( 左 图 )、iOS 平台 上 的 “Vodio”( 中 图 )、Windows Phone 8 平台 主页 面 ( 右 图 ) 


7.3.4 色彩 的 倾 回 性 


在 这 一 节 里 ， 我 们 谈 一 个 比较 特殊 的 问题 ， 那 区 是 在 为 应 用 界面 选择 色调 或 色彩 搭配 的 时 候 要 注意 
色彩 的 心理 倾向 和 风格 倾 加 。 心理 倾向 ”涉及 用 户 群 的 感性 特征 和 用 户 群 体 的 个 性 需求 ， 而 “风格 倾向 
则 关注 应 用 的 市 场 定 位 和 普 遇 特征 。 简 单 地 这 ， 融 是 在 为 应 用 界面 选择 色调 时 ， 需 要 了 解 这 个 颜色 育 后 的 
合 义 和 给 人 市 来 的 心理 变化 。 

1. 色彩 的 心理 倾 回 

色彩 的 心理 倾 同 研究 的 是 色彩 之 给 人 们 的 心理 变化 和 情绪 影响 。 作 为 设计 师 ， 我 们 在 对 应 用 界面 进行 
个 性 化 设计 时 ， 更 应 该 认真 了 解 每 一 个 色相 的 心理 倾 癌 特点 ， 有 意识 地 针对 应 用 的 个 性 万 同 以 及 特定 的 用 
户 群 体 选择 合适 的 色彩 。 下 面 是 各 个 颜色 在 心理 和 情绪 上 的 倾向 参考 。 

。 红色 。 通 剃 给 人 市 来 刺激 、 热 情 、 积 极 和 奔放 ， 还 有 喜气 和 六 得 等 。 

。 绿色 。 这 是 大 上 自然 和 植物 的 颜色 , 有 生命 、 年 轻 、 安全、 新 鲜 以 及 和 平 的 心理 倾向 , 给 人 以 清凉 之 感 。 

。 蓝 色 。 让 人 感到 悠远、 宁静 、 空 虚 和 清洁 等 。 

。 粉红 色 。 这 是 女性 最 喜欢 的 色彩 ， 有 具有 放松 和 安抚 情绪 的 效果 。 

。 术 色 。 给 人 杀 切 、 坦 率 、 开 衣 、 健 康 的 感 先 。 

。 黄色 。 这 是 明度 极 高 的 颜色 ， 能 刺激 大 脑 中 与 焦虑 有 关 的 区 域 ， 具 有 警告 的 效果 。 

。 淡 黄 色 。 上 有 具有 天 和 真 、 浪 漫 、 娇 嫩 的 感 先 。 
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。 紧 色 。 这 是 优雅 、 滔 漫 并 且 具 有 局 贵 气 质 的 颜色 。 

。 黑色 。 具 有 低调 、 执 着 、 冷 肖 和 防御 的 心理 特征 。 

。 灰色 。 给 人 城 奶 、 沉 稳 、 考 究 的 心理 感 咒 。 

。 日 色 。 其 特点 是 纯洁 、 神 圣 、 善 恨 与 信任 ， 也 会 给 人 梦幻 的 感 多 。 

当然 ， 我 们 这 里 为 大 家 归纳 的 是 各 个 颜色 主流 的 心理 特征 ， 并 不 全 面 ， 而 且 每 个 颜色 在 色彩 倾向 以 及 
明暗 度 和 纯 厌 上 的 变化 都 会 给 人 市 来 不 同 的 心理 感 有 党。 比如， 红色 如 果 稍 微 浑 浊 一 点 、 蜡 一 些 ， 残 会 给 人 
血腥 、 独 蚀 的 感觉 。 因 此 ， 对 颜色 的 细微 把 握 和 体味 ， 需 要 我 们 在 长 期 的 设计 和 生活 中 观察 和 积 囚 。 

2. 色彩 的 风格 倾向 

色彩 的 风格 倾 回 与 色彩 的 心理 倾向 有 些 类 似 ， 但 并 不 相同 。 心 理 倾 回 强调 了 鲜明 的 个 性 ， 而 风格 倾 加 
研究 的 是 普遍 性 和 共性 。 比 如 训 ,如果 我 们 留心 观察 ,会 友 现 大 部 分 系统 维护 或 设置 类 的 应 用 都 选用 深蓝 色 ， 
而 阅读 类 的 应 用 界面 一 般 都 会 选用 淡 土 黄色 。 原 因 很 简单 ， 深 监 色 给 人 扩 术 、 精 密 和 科技 的 感 苋 ， 而 淡 土 
黄色 纺 从 着 文 化 、 积 演 和 斑 皮 卷 的 质感 。 那 么 ， 其 他 颜色 还 会 具有 什么 样 的 普遍 意义 呢 ? 

。 黑色 。 和 象征 权威 、 高 雅 、 低 调 、 创 蕊 。 

。 灰色 。 和 象征 销 能、 成功、 权威、 考究。 

。 日 色 。 和 象征 信任 与 开放 。 

。 海军 蓝 。 象 征 权威 、 保 村 、 中 规 中 粉 与 务实 。 

。 褐色 。 典 和 雅 中 经 合 平和 、 亲 切 的 意象 。 

。 红色 。 象征 热情 、 性 感 、 权 威 、 自 信 ， 是 个 能 量 充 沛 的 色彩 。 

。 粉红 色 。 和 象征 温柔 、 甜 美 、 痕 漫 、 没 有 压力 。 

。 检 色 。 蜗 于 母爱 的 特质 ， 同 时 象征 着 健康 和 亲情 。 

无 论 是 颜色 的 “心理 倾向 ”还 是 “风格 倾向 ， 都 需要 我 们 在 深入 了 解 应 用 的 用 户 群 体 和 市 场 定位 的 
基础 上 ， 进 行 理 性 的 分 析 和 选择 。 不 要 想当然 地 按照 目 己 的 喜好 随意 选择 ， 这 样 很 容易 会 造成 用 户 误解 或 
者 排斥 。 


7.4 严谨 地 把 握 文 字 


在 第 4 章 中 ， 我 们 曾经 谈 到 过 处 理 文字 以 及 把 握 文字 和 图 片 天 系 的 方法 。 文 字 ， 是 界面 上 必 不 可 少 的 
视 况 元素， 也 是 我 们 必须 用 心 面 对 和 精心 处 理 的 环 筷 。 百 先 ， 要 尽 可 能 地 使 文子 简短 ， 同 时 要 将 成 段 的 广 
字 分 割 处 理 成 文字 块 ， 使 它们 成 为 像 图 片 一 样 能 够 在 界面 上 目 由 摆 放 的 视 兑 元素。 人 在 本 节 中 ， 我 们 将 从 平 
台 规 学 以 及 文字 本 身 的 特性 上 ， 谈 谈 界面 设计 中 把 握 文 字 元 素 的 万 法 和 经 验 。 
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7.4.1 选择 合适 的 字体 


字体 设置 是 体现 应 用 之 间 相 互 区 别 的 重要 个 性 所 在 ， 也 能 体现 设计 师 的 风格 和 偏好 。 虽 然 三 大 平台 在 
字体 设计 上 并 没有 做 出 明确 的 规范 要 求 ， 但 是 细心 的 设计 者 肯定 会 注意 到 ， 每 一 个 平台 都 有 目 己 独特 的 规 
范 字体 ， 主 要 体现 在 各 平台 的 系统 功能 及 原生 应 用 中 。 下 面 我 们 就 来 看 看 三 大 平台 中 规范 字体 的 样式 和 风 
格 吧 。 

如 图 7-38 所 示 ，iOS 平台 的 英文 字体 采用 的 是 Helvetica 系列 字体 ， 而 中 文字 体 采 用 的 是 常州 华文 
印刷 新 技术 有 限 公司 设计 的 “黑体 - 简 ” 字 体 (Heiti SC )。 


Helvetica Light Segoe UI| Light 
Helvetica LT Std A 四 D OO 2 二 
Helvetica CE Oblique SUNGLASSES 


Self-driving robot ice cream truck Car IOe (由 Semilln | 1 


Helvetica Bold Fudgesicles only 25¢ 


Helvetica Black ICE CREAM Segoe UI Regular 


DER Cyr po Marshmallows & almonds Segoe UI ltalic 
Helvetica Bold Oblique #987654321 0 Segoe UI Bold 


Helvetica Cyr Upright ; 
Music around the block Segoe UI Bold ltalic 


Helvetica LT Std Bold Summer heat rising up from the sidewalk 

中 文字 体 采用 的 是 。 中 文子 体 采 用 的 是 

黑体 - 简 文 录 驿 等 宽 微 米 黑 
微软 雅 黑 


图 7-38 三 大 平台 的 规范 字体 ， 左 图 为 iOS 平台 ， 中 图 为 Android 平台 ， 右 图 为 Windows Phone 平台 


Android 平台 的 英文 字体 采用 的 是 Roboto 系列 字体 ， 而 中 文字 体 采 用 的 是 “ 文 泉 驿 等 宽 微 米 黑 字 
体 ， 有 些 细节 采用 了 “微软 雅 黑 ”字体 。 

Windows Phone 平台 的 英文 字体 采用 的 是 Segoe U| 系列 字体 ， 而 中 文字 体 采 用 的 是 等 线 
( Dengxian ) 字体 ， 一 般 采 用 “方正 细 等 线 。 

这 三 大 平台 使 用 的 规范 字体 对 应 用 界面 设计 有 什么 实际 意义 吗 ? 还 是 那 句 话 ， 我 们 在 为 相应 的 平台 设 
计 应 用 界面 的 时 候 ， 要 相信 它 的 品味 ， 迎 合 它 的 风格 ， 这 样 你 的 应 用 看 上 去 才 会 比较 规范 和 完善 ， 与 其 他 
应 用 能 够 整齐 划一 打成一片 。 当 然 ， 从 应 用 界面 的 个 性 化 设计 来 讲 ， 我 们 似乎 并 不 一 定 非 要 选择 这 些 规范 
字体 ， 而 是 应 该 选择 与 众 不 同 的 字体 来 充实 我 们 的 界面 。 但 事实 上 ， 我 们 细心 观察 后 会 友 现 ， 大 部 分 个 性 
化 鲜明 的 设计 师 并 没有 放弃 使 用 这 些 规范 的 字体 。 原 因 有 两 个 ， 首 先 个 性 化 的 设计 要 着 眼 于 大 处 ， 比 如 布 
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局 构图、 色彩 或 图 形 等 , 而 文字 的 细小 变化 并 不 会 给 人 们 市 来 强烈 的 视 完 变化 , 而 一 旦 使 用 了 夸张 的 子 体 ， 
很 容易 影响 用 户 的 阅读 惯性 从 而 产生 反感 ， 毕 竟 文 字 主 要 是 用 来 阅读 而 不 是 欣 贡 的。 另外 ， 无 论 你 的 应 
用 多 么 充满 个 性 ， 最 终 还 是 应 该 保留 一 丝 相 应 平台 的 特征 ， 那 么 字体 束 是 最 适合 也 是 最 容易 被 用 户 接 受 
J 细 证 。 

在 这 里 ， 我 们 推荐 大 家 尽量 使 用 各 个 平台 相应 的 规范 字体 ， 但 是 总 会 出 现 一 些 特殊 的 创意 或 情形 而 
不 得 不 选择 其 他 字体 。 这 里 我 们 给 大 家 一 泽 建 议和 忠告 : 和 首先， 尽量 选择 经 典 子 体 而 不 要 选择 怪异 、 坊 
张 的 字体 。 经 典 字 体 主 要 包括 身 文 的 各 种 黑体 、 罗 马 体 、 哥 特 体 和 手写 体 ， 汉 字 的 各 种 黑体 、 宋 体 和 楷 


EL 


从 图 7-39 中 可 以 看 到 ， 应 用 界面 的 个 性 化 设计 大 多 并 不 涉及 规范 字体 或 经 典 字 体 的 使 用 ， 而 iOS 
上 “Vital Signs DB ”的 局 部 使 用 了 比较 特殊 的 Courier New 字体 ,看 上 去 很 像 老式 的 针 孔 打印 机 的 效果 ， 
但 是 它 属 于 英文 黑体 的 变种 。 
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7-39 iOS 上 的 “Vital Signs DB”( 左 图 )、Android 平 台 上 的 “NBC News”( 中 图 ) Windows Phone 平台 的 
“Phototastic”( 右 图 ) 


但 有 一 种 情况 例外 ， 那 瓯 是 出 现在 界面 中 的 应 用 名 称 。 很 多 设计 师 为 目 己 的 应 用 名 称 精 心 打 造 了 非 党 
醒目 的 标题 样式 ， 目 的 是 为 了 产生 品牌 效应 或 给 用 户 留 下 深刻 的 视觉 印象 。 这 有 些 类 似 于 VI 设计 (企业 
视 竞 形象 设计 ) 的 做 法 ， 把 应 用 名 称 作为 商标 来 设计 。 当 然 ， 这 个 时 候 可 以 充分 友 挥 你 的 创造 力 ， 选 择 更 
加 个 性 、 另 类 甚至 硅 张 的 字体 ， 示 例 图 如 图 7-40 所 示 。 
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7-40 iOS 上 的 “Note'd”( 左 图 )、Android 平台 上 的 “Soundtracking”( 中 图 )、 Windows Phone 平 
台 的 “Camera360”( 右 图 ) 


7.4.2 推 歌 文字 的 四 个 要 素 


无 论 我 们 面 对 的 是 单行 文字 、 整 段 文字 还 是 文字 组 ， 作 为 专业 的 设计 师 ， 我 们 必须 同时 考虑 四 件 事情 ， 
也 就 是 文字 的 四 要 素 : 字 体 、 大 小 、 字 距 ( 字 与 字 之 间 的 间距 ) 和 行距 ( 每 行 之 间 的 距离 )。 这 四 要 素 缺 一 不 可 ， 
它们 对 于 应 用 界面 的 设计 和 细节 处 理 也 是 至 关 重 要 的 。 也 就 是 说 ， 我 们 只 要 在 处 理 文 字 的 时 候 同 时 考虑 到 这 
四 个 问题 ， 应 用 界面 上 的 文字 元 素 从 视 涡 上 就 得 到 了 保障 ， 不 会 出 现 问题 。 反 过 来 ， 如 果 我 们 忽视 了 这 四 个 
要 素 中 的 任何 一 个 ,肯定 会 在 视 荔 上 使 人 感到 有 所 欠缺, 或 者 不 够 专业 和 细致 。 下 面 我 们 对 它们 逐一 进行 分 析 。 

字体 的 问题 我 们 刚刚 在 上 一 节 阐 述 过 ,这 也 是 四 要 素 中 最 重要 的 一 方面 ,是 文字 元 素 视觉 效果 的 主体 。 
因此 ， 我 们 特意 把 它 放 在 本 节 最 前 面 来 突出 它 的 重要 地 位 。 接 下 来 ， 我 们 谈 一 谈 文字 的 大 小 。 

三 大 平台 在 文字 大 小 上 也 有 相应 的 规范 。iOS 平台 应 用 的 界面 通常 使 用 12 点 、14 点 、16 点 和 20 点 
这 几 个 尺寸 ( 视网膜 技术 的 屏幕 翻 倍 )，Android 平台 的 通常 是 12 点 、14 点 、18 点 、22 点 ，Windows 
Phone 平台 的 通常 是 36 点 、16 点 、11.5 点 和 10 点 。 当 然 , 这 些 数值 可 以 作为 我 们 设置 文字 大 小 的 参考 。 

然而 ， 针 对 文字 的 大 小 设置 , 我 们 还 有 一 些 经 验 与 大 家 分 享 。 首 先 , 不 要 为 了 突出 而 一 味 地 放大 文字 。 
除了 主 标题 外 ， 较 大 的 文字 在 视觉 上 会 显得 比较 粗糙 和 答 重 ， 相 反 ， 精 致 秀气 的 小 字 更 容易 引起 用 户 的 阅 
读 兴 趣 和 研读 欲望 。 第 二 ， 如 果 一 定 要 放大 文字 ， 最 好 把 它 与 相对 细小 的 文字 并 列 搭配 ， 形 成 视 竞 上 的 大 
小 对 比 。 这 样 的 对 比 效果 会 使 界面 显得 更 加 丰富 且 充 实 ， 示 例 图 如 图 7-41 所 示 。 第 三 ， 在 同一 个 界面 上 ， 
尽量 使 文字 的 大 小 区 分 开 ， 比 如 标题 、 内 容 和 标注 等 ， 不 要 将 所 有 的 文字 都 使 用 相同 的 大 小 ， 这 样 反 而 会 
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使 界面 失去 条 理 而 显得 十 分 混乱 。 
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7-41 iOS 上 的 “Mail”( 左 图 )、Android 平台 上 的 “联系 人 (中 图 入 Windows Phone 平台 的 “音乐 
+ 视频 ”( 右 图 ) 


天 于 文字 的 字 距 和 行距 ， 我 们 可 以 放 在 一 起 分 析 ， 虽 然 这 两 项 数值 一 般 不 会 在 程序 里 加 以 调整 而 使 用 
系统 默认 的 搭配 ,但 是 这 里 必须 对 它们 进行 分 析 ， 因 为 这 是 文字 元 秦 的 视 完 印象 里 非常 重要 的 细 证 。 其 实 ， 
稍 加 观察 我 们 束 可 以 得 出 这 样 一 个 规律 ， 那 殊 是 “小 字 距 ， 大 行距 。 为 什么 ? 原因 很 简单 ， 字 间距 比较 
近 会 使 阅读 更 加 流畅 ， 而 较 况 的 行距 使 得 读者 在 换行 的 时 候 更 加 清晰 、 准 确 ， 不 会 看 错 行 。 当 然 ， 更 重要 
的 原因 是 使 界面 结构 看 上 去 更 加 有 调理 和 和 美观， 示例 如 图 7-42 所 示 的 帮助 文本 。 
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7-42 
iOS 上 的 “DirecTV” 
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以 上 是 我 们 对 文字 处理 细节 上 的 经 验 和 建议 , 相信 会 给 大 家 在 应 用 界面 文字 的 把 握 上 提供 启 友 和 帮助 。 
那么 ， 在 文字 本 身 处 理 得 当 的 同时 ， 文 字 群 与 界面 的 天 系 也 不 能 怨 视 ， 甚 至 会 显得 更 加 剖 要 。 


7.4.3 ”人 处理 好 字 群 的 位 置 关系 


文字 通常 是 不 会 孤立 出 现在 界面 上 的 ， 它 们 往往 是 导航 栏 里 的 标题 、 列 表 里 的 项 目 名 称 、 图 标的 注释 
或 是 图 片 说 明 等 。 那 么 无 论 出 现在 任何 位 置 上 ， 我 们 都 要 细心 地 把 文字 恰到好处 地 放 在 相应 的 空间 里 ， 处 
理 好 文字 与 这 些 界面 元 素 的 空间 和 位 置 关系 。 

通过 对 图 7-43 中 Android 平台 上 的 “Instagram” 应 用 界面 的 测量 和 比较 ， 我 们 可 以 感受 到 设计 师 
对 处 理 文字 空间 位 置 的 严谨 和 规范 。 无 论 是 单个 词语 、 单 行 的 文字 标题 还 是 成 段 的 文字 ， 我 们 都 应 该 注意 
在 它 的 四 周 留 有 足够 的 空间 和 颖 孙 ， 干 万 不 要 使 文字 和 图 形 的 边缘 挨 在 一 起 或 离 得 太 近 ， 这 样 会 在 视 癌 上 
使 人 感到 很 拥堵 禾 上 间 ， 一 定 要 让 所 有 的 元 素 之 间 留 有 空间 或 空隙 ， 以 保持 “空气 畅通。 同时 ， 要 注意 
文字 的 上 下 和 左右 的 对 齐 ， 这 是 最 基本 的 规范 。 
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7.5 界面 风格 和 特效 


界面 上 的 图 形 元 素 、 色 彩 搭配 和 文字 设置 都 是 个 性 化 设计 中 的 局 部 和 细 证 问题 ， 要 真正 把 握 好 应 用 界 
面 视 竞 上 的 个 性 化 ， 最 关键 的 还 是 稳 握 好 应 用 设计 的 整体 风格 。 细 忆 是 服务 于 风格 的 ， 而 风格 才 是 真正 使 
应 用 界面 苑 满 视 营 魅力 的 因素 。 在 本 万 中 ， 我 们 为 大 家 介绍 几 种 移动 应 用 弟 见 的 个 性 化 风格 和 处 理 万 式 。 


7.5.1 拟 物化 风格 


拟 物 化 风格 来 源 于 交互 设计 中 的 隐喻 的 处 理 手 法 ， 所 谓 隐喻 束 是 使 用 一 个 我 们 熟知 的 事物 来 暗喻 另 一 
个 事物 ， 我 们 日 党 生活 中 的 “隐喻 ”可 以 使 语言 表达 生动 有 内 涵 。 比 如 ， 我 的 手机 是 我 的 宠物 ， 他 的 老婆 
是 个 母 老虎 。 而 图 形 设计 中 的 隐喻 也 是 同样 的 道理 ， 使 用 现实 生活 中 的 事物 代替 我 们 的 图 形 元 素 ， 让 画面 
生动 、 易 懂 。 其 实 ， 隐 喻 手法 从 我 们 很 早 使 用 电脑 的 时 候 就 已 经 司空 见 惯 了 ， 当 我 们 把 电子 文件 放 进 文件 
夹 时 感觉 很 合理 也 很 正常 ， 可 你 是 否 想 过 ， 实 际 上 根本 没有 什么 真实 的 文件 和 文件 来 ， 它 们 只 是 电脑 里 复 
杂 的 数据 结构 ， 如 果真 的 把 它们 背后 的 程序 和 数据 呈现 在 你 面前 ， 芍 怕 大 部 分 人 无 法 理解 。 因 此 我 们 可 以 
感觉 到 ， 图 形 隐喻 使 我 们 快速 掌握 了 电脑 复杂 的 内 部 机 制 |。 

为 了 让 我 们 的 移动 应 用 看 上 去 更 直观 杀 切 、 操 作 起 来 更 简 捍 好 用 ， 我 们 在 设计 界面 时 要 羡 于 把 图 形 隐 
喻 做 好 。 不 过 ， 这 里 面 最 重要 的 就 是 要 选择 好 隐喻 的 对 象 ， 一 定 要 使 用 户 一 眼看 上 去 就 能 理解 ， 所 以 我 们 
要 选择 日 常生 活 中 常见 的 、 能 被 大 多 数 人 熟知 的 事物 来 隐喻 我 们 的 功能 和 界面 。 我 们 可 以 看 一 看 iOS 平台 
上 这 些 标准 控件 的 样式 : 一 时 卡片、 电灯 的 开关 、 老 式 的 仪表 、 收 音 机 上 的 滑 块 …… 由 于 有 了 现实 生活 中 
的 经 验 ， 这 些 控件 看 上 去 就 知道 怎么 有 用， 无 需 我 们 学 习 。 

做 好 界面 上 的 图 形 隐喻 还 有 一 个 好 处 ， 那 就 是 让 大 家 从 视 癌 上 感到 美观 、 杀 切 ， 喜 欢 拿 在 手 里 把 玩 。 
这 束 要 求 设计 师 把 这 个 隐喻 制作 得 很 漂亮 ， 而 且 关 键 是 要 很 晕 真 。 而 这 个 细致 美化 和 人 退 求 帝 真 的 过 程 束 是 
拟 物 化 风格 的 体现 。 

从 图 7-44 中 可 以 看 到 ,三 大 平台 都 有 很 多 应 用 界面 使 用 精致 的 拟 物化 效果 .Android 平 台 上 的 Sound 
Recorder” 是 一 款 很 简单 易 用 的 录音 机 。iOS 上 的 “Vital Signs DB” 是 一 款 测 量 并 记录 血压 等 生命 体 
征 的 医疗 应 用 。 而 Windows Phone 平台 的 “Jack of Tools” 是 一 款 多 功能 的 工具 袋 ， 可 以 随时 测量 你 
的 位 置 、 速 度 和 海拔 高 度 。 三 款 工 具 都 非常 直观 地 使 用 了 生活 中 相应 的 事物 隐喻 了 应 用 的 功能 和 操作 方法 。 

对 于 拟 物化 风格 ， 我 们 不 单单 停留 在 图 形 设 计 和 视觉 风格 上 ， 想 要 达到 逼真 的 物理 真实 感 ， 还 有 其 他 
元 素 可 以 作文 章 ， 比 如 声音 、 振 动 和 动画 。 在 旋转 按钮 的 时 候 ， 如 果 同 时 发 出 哄 哄 的 机 械 声 音 ， 会 是 什么 
样 的 体验 ? 图 7-44 中 Android 平台 上 的 “Sound Recorder” 在 录音 过 程 中 磁带 会 持续 转动 ， 这 些 细 节 
元 素 的 增加 会 使 用 户 在 使 用 应 用 时 增加 愉悦 感 。 但 是 ,我 们 同时 也 要 提醒 大 家 , 拟 物 化 效果 点 到 为 止 就 够 了 ， 
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干 万 不 要 走 得 太 远 ， 不 然 很 容易 做 得 恶俗 。 我 们 的 应 用 界面 是 服务 于 功能 的 ， 不 能 舍 本 求 末 。 过 于 迷恋 目 
己 的 设计 反而 会 弱化 功能 的 效果 ， 比 如 在 使 用 动画 的 时 候 ， 不 要 让 动画 持续 太 久 而 影响 了 主体 内 容 的 展示 
幽默 的 效果 只 在 开始 几 次 能 让 人 友和 突 ， 之 后 吕 会 使 人 厌倦 。 因 此 ， 我 们 要 保持 清醒 ， 所 有 的 元 素 都 是 为 了 
用 户 体验 而 设计 ， 不 是 为 了 设计 而 设计 。 
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图 7-44 Android 平台 上 的 “Sound Recorder”( 左 图 )、iOS 上 的 “Vital Signs DB”( 中 图 ) 和 Windows Phone 平 
台 的 “Jack of Tools”( 右 图 ) 


7.5.2 扁平 化 设计 


这 也 是 一 个 受 欢 迎 很 久 的 、 以 简约 主义 为 核心 的 设计 观念 。 随 着 Windows Phone 的 出 现 、Android 
4.0 的 新 设计 以 及 iOS 7 的 友 布 ， 这 种 趋势 最 近 更 加 流行 。 局 平 化 设计 融 是 不 使 用 任何 额外 效果 的 设计 观 
念 ， 去 挥 任何 3D 效果 ， 没 有 很 深 的 阴影 、 斜 角 、 立 体 浮 雕 、 潮 概 或 者 其 他 万 法 创建 的 凸 出 或 者 凹陷 效果 。 
无 论 图 标 还 是 界面 元 素 ， 它 们 都 是 很 鲜明 的 剪影 ， 只 有 边 绿 和 形状 ， 没 有 修饰 和 特效 。 所 谓 局 平 化 ， 殊 是 


一 切 都 是 平 的 。 
局 平 化 设计 并 不 是 拒绝 一 切 的 沪 饰 效果 。 首 先 ， 它 关注 颜色 ， 局 平 化 设计 通 党 选择 使 用 鲜艳 明亮 的 色 


彩 。 从 色 块 、 图 形 、 栏 目 条 到 工具 栏 图 标 ， 颜 色 都 是 一 个 关键 的 组 成 元 素 。 同 时 ， 它 还 关注 文字 。 很 多 局 
平 化 的 设计 为 保持 简单 的 流程 和 感 苋 ， 只 会 包含 很 少 的 文字 。 因 此 ， 你 需要 注意 每 一 处 的 文字 长 展 。 示 例 
图 如 图 7=A45 所 示 。 
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Linked In 
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汪汪 


7-45 iOS 平台 的 “Spendee”( 左 图 )Windows Phone 上 的 “Linked in (中 图 ) 和 Android 平台 上 的 “Foursquare”( 右 图 ) 


局 平 化 设计 还 有 一 个 很 重要 的 特征 ， 那 殊 是 对 层级 的 优化 。 在 5.1 万 里 ， 我 们 曾 向 大 家 介绍 了 局 平 化 
言 息 的 层级 特点 。 人 简单 地 说 ， 丈 是 这 些 信息 之 间 没 有 从 属 的 层级 关系 ， 尽 可 能 地 把 内 容 放 置 在 同一 个 层级 
或 页 面 内 ， 骨 着 重 突出 那些 与 核心 功能 相关 的 交互 元 秦 ， 这 样 可 以 使 界面 得 到 最 有 针对 性 的 优化 和 入 化 ， 
让 用 尸 在 最 短 的 时 间 内 清楚 地 识别 出 信息 和 功能 的 关系 ， 并 且 很 容易 知道 接 下 来 应 该 做 什么 。 

局 平 化 设计 风格 的 实现 过 程 并 没有 看 上 去 那么 简单 ， 越 是 简约 的 图 形 其 实 越 难 设计 ， 你 必须 把 注意 力 
都 集中 到 每 一 个 细节 上 面 去 ， 因 为 没有 阴影 和 其 他 效果 去 民 重 你 的 缺点 。 昌 然 大 多 使 用 明亮 的 颜色 来 进行 
设计 ， 但 也 需要 使 用 黑 、 晶 、 灰 这 样 的 灰 度 色 系 来 进行 过 度 和 陪 讨 。 


7.5.3 手绘 体 风 格 


拟 物化 风格 和 局 平 化 设计 ， 是 两 个 相互 对 立 并 有 举 极 痛 的 设计 风格 。 当 然 ， 隐 喻 这 个 概念 本 身 可 以 应 
用 到 任何 风格 里 去 , 包括 局 平 化 风格 的 图 标 。 除 此 之 外 ,我们 还 可 以 有 很 多 的 创新 风格 和 个 性 化 处 理 万 法 。 
手绘 体 ” 融 是 一 种 很 受 欢迎 的 个 性 化 处 理 风格 。 

手绘 体 融 是 以 手工 绘图 .速写 或 手写 文字 为 元 素 的 设计 风格 。 从 图 7-46 中 我 们 可 以 体会 到 手绘 体 
的 特点 : 放松、 随意 、 滔 漫 、 幽 时。 如 今 不 仅仅 是 手工 制作 , 老式 打字 机 和 油墨 印刷 的 视 竞 效果 也 加 入 了 进来 ， 
这 为 这 种 随 性 、 痕 漫 的 风格 加 入 了 历史 和 上 右 朴 的 色彩 。 

我 们 需要 注意 的 是 , 无 论 使 用 什么 样 的 风格 对 应 用 界面 进 包 妆 设计 ,一 定 要 保持 风格 一 致 。 也 残 是 这 ， 
不 能 上 一 个 界面 使 用 了 通 真 的 拟 物化 手法 ， 下 一 个 页 面 又 使 用 局 平 化 风格 ， 或 者 是 在 精确 严 谣 的 界面 格调 
中 突然 出 现 很 多 手绘 元 素 ， 这 样 做 的 结果 大 家 可 想 而 了 各 ， 上 朋 定 是 不 伦 不 类 。 那 么 ， 除 了 界面 上 个 性 化 设计 
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和 包 洲 外 ， 另 一 个 因素 更 是 对 应 用 的 视 完 印象 起 到 决定 性 作用 的 ， 那 束 是 我 们 接 下 来 要 着 重 讨 论 的 话题 : 
应 用 的 图 标 设计 。 


i Sen PR ”ES aa 本 豆 [| 时 一 


TS 8 CHEFS FEED 


MUL BYE WH THE MT | MO OO 1 


CTY'S BEST CHEFS 

THEIR FAVYORITE DlSHES wv 

rr FEEDMEANOW 
Wy -LVEFEED 二 


MESSACES 


于 


| 全 ial 
Li 


L! 外 
T IH 


PROFILE 
辣 忆 MH 正 


Ti fre pr 
learher 二 Et 
| 
ban tr |i Er 
| 


| Te 时 
= td 和 is en 


| | 

3 eile 时 避 滑 \ refer te 
cantidered ti i 展 the fe 
| Wr decreasiead 
Fa of th 自 at 
Phulecapher’ rrp: wl ~ 


| 


| 


图 7-46 iOS 平台 上 的 “手绘 体 ” 风 格 应 用 


随 着 本 和 章 内 容 的 结束 ,我 们 也 到 了 和 同 大 家 展示 也 术 品 收藏 "应 用 卉 面 的 个 性 化 设计 结 雪 的 上 时候 了 。 


经 过 我 们 的 设计 、 弹 造 和 反复 的 推 鼓 ， 乔 面 最 终 偿 是 比较 令 我 们 满 砷 的 。 下 面 先 来 看 看 应 用 的 主页 面 ， 
如 图 7-47 所 示 。 


np 等 和 业 手 文章 
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图 7-47 
iPad 上 的 艺术 品 收藏 
应 用 主页 面 
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我 们 把 5 个 列表 项 目 设 计 成 了 苟 放 在 一 起 的 书签 ， 通 过 动 田 可 以 让 每 一 个 书 等 父 芹 前 置 ， 并 统 
一 通过 一 个 固定 的 控 钮 进行 卉 面 跳 和 ， 进 入 下 一 级 页 面 。 侍 色调 上 ， 我 们 为 了 最 大 限 尽 地 突出 作品 本 
身 的 色彩 魅力 ， 一 律 选择 折 色 和 浅 屎 色 作为 主 色 调 ， 桂 托 作品 本 身 的 丰富 色 彩 。 该 应 用 的 陈 绚 页 面 如 


pe a 


iPad 上 的 “艺术 品 收 藏 ” 应 用 陈列 页 面 


图 7-48 
面 的 木 架 和 业 麻 布 ， 这 下 文 


于 是 5 作 呈 二 


对 于 作品 信息 的 处 理 ， 我 们 突 友 奇想 地 把 国 面 反 转 过 来 ， 
字 科 图标 都 有 地 万 放 了 。 不 过 ， 为 了 使 用 性 不 会 起 记 目 已 翻转 的 是 哪 一 幅 作 品 ， 我 们 必须 在 表面 放 管 一 
， 我 们 隐藏 了 乔 面 上 所 有 


张 作 品 的 抱 上 略图， 就 假 个 干 胶 由 纸 一 样 。 同 时 ， 为 了 加 强 男 怕 身 | 八 其 卉 的 感觉 
中 


的 近 钮 和 元 素 ， 只 有 通过 蛙 击 国 面 ， 才 能 


图 7-49 iPad 上 的 “艺术 品 收藏 ”应 用 陈列 页 面 工具 栏 和 索引 页 面 
最 后 是 泰 引 内面 ， 我 人 把 所 有 的 缩 略 图 制 作成 老式 入] 片 的 效果 ， 同 时 进行 了 细致 的 排列 ， 这 里 


工具 柱 同 桂 倍 隐藏 起 来 。 对 填 整 个 册 用 的 窜 面 设 计 ， 我 们 遵循 的 理念 束 是 简约 、 大 气 、 细 致 和 流畅 的 


动态 人 交互 ， 同 时 ， 突 出 信息 主体 ， 绝 个 唱 宪 竺 主 。 


做 好 应 用 的 图 标 设计 


无 论 我 们 的 设计 工作 多 么 艰 辫 和 漫长 ， 现 在 快要 接近 尾声 了 ， 而 图 标 设计 是 整个 应 用 设计 过 程 中 真正 
的 重点 。 不 过 在 我 个 人 看 来 ， 这 也 是 对 设计 师 考验 最 大 的 一 天 。 因 为 一 提 到 图 标 设计 ， 我 们 束 会 联想 到 标 
人 怪 或 徽章 设计 ， 这 可 是 平面 设计 里 难度 最 大 的 一 门 学 问 。 当 然 ， 图 标 设计 和 标志 设计 还 是 有 很 大 区 别 的 ， 
一 个 是 讲究 直观 和 隐喻 ， 一 个 是 追求 象征 和 抽象 ， 但 是 它们 的 可 识别 性 和 符号 化 的 特点 ， 以 及 对 设计 师 图 
形 造 型 能 力 的 高 标准 要 求 是 相同 的 。 

但 是 成 功 地 设计 出 拥有 完美 视 名 印象 的 图 标 ， 并 不 是 件 脖 不 可 及 的 事情 。 我 们 通过 丰 遇 多样 的 设计 思 
路 、 严 谨 的 设计 理念 以 及 完善 的 设计 流程 ， 依 托 三 大 平台 的 设计 规 沁 和 图 形 特征 ， 是 完全 可 以 为 你 的 应 用 
设计 出 精彩 的 图 标的 。 下 面 我 们 融 从 最 基本 的 图 标 设计 原则 开始 图 标 设计 之 旅 。 


8.1 图 标 设 计 的 原则 


这 里 所 识 的 图 标 一 般 包括 两 大 类 : 局 动 图 标 和 工具 栏 图 标 。 

局 动 图 标 也 称 为 果 面 图 标 。 顾 名 思 义 ， 它 就是 存放 在 应 用 平台 主页 面 上 的 、 通 过 点 击 束 能 够 打开 并 进 
入 应 用 程序 的 图 标 。 它 束 像 应 用 程序 的 名 片 ， 是 我 们 接触 一 个 应 用 的 第 一 印象 。 无 论 是 在 移动 设备 的 主页 
上 还 是 在 应 用 商店 的 列表 里 ， 局 动 图 标 都 会 与 无 数 其 他 的 应 用 程序 放 在 一 起 。 因 此 ， 设 计 一 个 精美 绚丽 、 
充满 视 罗 冲击 力 的 局 动 图 标 是 非常 重要 的 。 示 例 图 如 图 8-1 所 示 。 
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三 大 平台 的 启动 图 标 样 式 左上 角 为 iIOS 平 台 , 左 下 角 为 Android 平 台 , 右 边 为 Windows Phone 平 台 ) 


工具 栏 图 标 包 含 了 进入 应 用 程序 后 的 所 有 图 标 样 式 ， 包 括 操 作 栏 、 通 知 栏 、 导 航 栏 以 及 列表 上 的 各 种 
图 标 。 每 一 个 通知 栏 图 标 都 有 一 个 非常 直观 而 明确 的 含义 ， 大 部 分 是 由 旱 色 表现 的 ， 但 是 根据 界面 的 视 沉 
需要 ， 有 时 也 会 是 彩色 的 。 干 万 别 忽 视界 面 上 这 些 细小 的 零件 ， 它 们 可 是 提升 应 用 视觉 档次 的 利器 。 示 例 
图 如 图 8-2 所 示 。 
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图 8-2 三 大 平台 的 工具 栏 图 标 样式 ( 左 图 为 Android 平台 ,中 图 为 iOS 平台 , 右 图 为 Windows Phone 平台 ) 


9 备份 和 重 轩 


虽然 局 动 图 标 和 工具 栏 图 标的 用 处 不 同 ， 且 在 表现 万 式 上 也 有 所 区 别 ， 但 是 在 设计 过 程 中 都 要 遵循 图 
标 设计 的 几 个 基本 原则 ， 而 这 几 个 原则 是 保障 图 标 设 计 能 够 适应 市 场 范 争 以 及 功能 需求 的 重要 依据 。 下 面 
我 们 来 看 看 图 标 设计 中 需要 注意 哪些 基本 的 原则 。 
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8.1.1 图 标 设计 的 “识别 性 ”原则 


说 到 “识别 性 ， 我 们 可 能 会 想到 文字 ， 因 为 文字 是 最 具 识 别 性 特征 的 事物 。 每 个 文字 都 是 独一无二 、 
无 可 蔡 代 的 ， 同 时 又 都 代表 着 完全 不 同 的 含义 ， 我 们 通过 识别 文字 来 理解 事物 、 判 断 事物 、 达 到 目标 或 者 
得 到 帮助 。 从 菏 种 意义 上 来 品 ， 图 标 能 起 到 文字 的 作用 ， 或 者 说 是 文字 的 引申 ， 但 是 图 标 比 文字 直观 ， 也 
比 文字 美观 和 丰富 ， 只 是 表达 上 没有 文字 准确 。 在 生活 中 ， 我 们 同样 可 以 通过 图 标 来 理解 和 判断 事物 。 通 
过 图 标 ， 我 们 可 以 在 公路 上 顺利 地 找到 出 口 、 服 务 区 和 停车 场 ， 在 公共 场所 不 会 进 错 卫 生 间 ， 在 纷乱 嘲 杂 
的 商场 里 迅速 判断 出 口 、 电 梯 间 和 洗手 辣 的 方向 或 位 置 。 

因此 ,， 图标 不 同 于 一 般 的 图 形 ， 它 要 求 具备 强烈 的 视觉 上 的 可 识别 特征 ,其 最 重要 的 作用 丈 在 于 识别 |。 
在 图 标 设计 中 ， 形 式 美 并 不 是 天 键 ， 能 不 能 准确 地 被 识别 一 定 是 设计 师 的 第 一 目标 。 好 的 图 标 设 计 ， 要 么 
能 够 使 相对 应 的 功能 一 目 了 然 ， 要 么 能 够 表达 出 明确 的 内 涵 ， 或 者 符合 大 众 一 贯 的 经 验 判 断 ， 总 之 是 要 使 
用 户 能 够 迅速 判断 出 它 的 侣 义 。 

通过 图 8-3， 我 们 可 以 体会 到 图 标 设 计 的 识别 性 原则 。iOS 平台 应 用 “查找 我 的 朋友 ”的 启动 图 标 通 
过 非常 直观 的 隐喻 手法 ， 使 用 户 非常 自然 地 把 应 用 归 类 在 交友 工具 里 。Android 平台 的 “Gmail 应 用 使 
用 了 平台 标准 的 工具 栏 图 标 ， 虽 然 没有 在 图 标 下 面 进行 文字 注释 ， 但 是 我 们 可 以 一 目 了 然 地 判断 出 “添加 
邮件 “查找 、 标签 ”和 “同步 ”4 个 功能 。 而 Windows Phone 平台 系统 的 “设置 ”启动 图 标 则 是 利 
用 了 大 众 对 次 轮 图 形 的 一 贯 印象 ， 合理 隐 喻 了 “设置 ”这 一 内 涵 。 因 此 ， 在 考虑 图 标 造型 的 时 候 ， 首 先 要 
把 合 义 表达 清楚 。 如 果 展 现 的 图 形容 易 引 起 上 收 义 , 即便 设计 的 造型 再 完美 、 细 书 青 精怪, 那 也 是 失败 的 作品 ， 
失 之 毫 厘 ， 差 之 干 里 。 
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图 8-3 iOS 平台 “查找 我 的 朋友 ”启动 图 标 ( 左 图 )、Android 平台 “Gmail ”应 
用 的 工具 栏 图 标 ( 中 图 )、Windows Phone 平台 系统 的 “设置 ”启动 图 标 
( 右 图 ) 


8.1.2 ”图标 设计 的 “一 致 性 ”原则 


一 分 性 原则 主要 针对 图 标的 设计 风格 来 说 的 ， 我 们 需要 从 以 下 3 个 万 面 来 给 大 家 阐述 。 

。 同一 款 应 用 在 不 同 平台 上 的 图 标 要 一 致 。 由 于 三 大 平台 在 图 标 设 计 风 格 和 规范 上 有 了 明显 的 区 别 |， 
所 以 我 们 的 应 用 在 平台 移植 的 时 候 不 能 简单 地 使 用 完全 相同 的 图 标 。 这 时 设计 师 需要 针对 不 同 的 
应 用 平台 设计 规范 对 图 标 进行 修改 ， 在 符合 平台 特点 的 基础 上 使 图 标 尽 可 能 一 致 。 
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通过 图 8-4 中 的 “Skype ”局 动 图 标 ， 我 们 可 以 看 到 同一 款 应 用 图 标 在 不 同 应 用 平台 上 的 一 致 性 
原则 。 而 “UC 浏览 器 ”启动 图 标的 设计 在 相当 长 的 一 段 时 间 里 没有 遵守 这 一 原则 ， 虽 然 在 iOS 
和 Android 平台 上 的 风格 一 致 ， 然 而 在 Windows Phone 平台 上 却 过 于 追求 平台 特有 的 扁平 化 设 
计 风 格 ， 这 与 之 前 的 设计 大 相 径 庭 ， 使 用 户 很 容易 费解 ， 也 许 会 把 它 当 成 山寨 品 。 


SeB eegB 


Androlid “Windows Phone Androld Windows Phone 
图 8-4 “Skype 启动 图 标 〈 左 图 ) 和 “UC 浏览 器 ”启动 图 标 《 右 图 ) 


。 同一 平台 的 不 同 图 标 之 间 的 风格 或 规范 要 一 致 。 前 面 我们 提 到 ， 每 一 个 应 用 平台 都 有 目 己 的 一 套 
完整 的 设计 风格 和 规范 要 求 ， 在 图 标 设计 上 更 是 这 样 。 因 此 ， 我 们 在 进行 图 标 设 计时 ， 一 定 要 深 
入 了 解 每 个 应 用 平台 的 图 标 规 学 和 视 况 风格。 在 8.2 节 和 8.3 节 中 ， 我 们 会 分 别针 对 三 大 平台 对 

这 一 问题 进行 深入 的 前 述 。 在 这 里 ， 我 们 可 以 先 通过 图 8-5 来 体会 一 下 iOS 平台 的 图 标 设计 的 视 
总 风格 和 图 形 规 泄 。 


= 
ed 
= 
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图 8-5 iOS 平台 的 应 用 图 标 


通过 图 8-6 中 Android 平台 上 不 同 应 用 中 工具 栏 图 标的 设计 ， 我 们 也 可 以 体会 到 在 相同 平台 进行 
图 标 设计 时 应 遵循 的 一 致 性 原则 。 


国 全 屏 
一 音量 键 翻 页 
一 QA 好 人 
加 智能 封面 
虽 ”使 用 密码 
凶 ”继续 阅读 


图 8-6 Android 平台 工具 栏 图 标 
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。 同一 应 用 中 工具 栏 图 标的 风格 、 细 节 和 规格 要 一 致 。 我 们 知道 ， 不 要 小 看 表面 上 微不足道 的 工具 
栏 图 标 ， 这 些小 零件 实际 上 是 移动 应 用 界面 设计 中 起 到 画龙点睛 作用 的 重要 一 笔 。 而 能 不 能 把 界 
面 设计 得 既 完 美 又 统一 ， 天 键 融 在 于 是 售 能 把 握 好 工具 栏 图 标的 图 形 一 致 性 原则 。 这 一 点 ， 对 设 
计 师 的 造型 能 力 的 考验 尤为 突出 。 
通过 图 8- 7 我 们 可 以 明显 地 体会 到 同一 球 应 用 内 部 不 同 的 工具 栏 图 标 在 设计 过 程 中 所 遵循 的 一 致 
性 原则 。 虽 然 每 个 图 标 各 不 相同 ， 但 是 它们 的 大 体 风 格 、 规 格 尺寸 以 及 边 绿 和 细 证 处 理 都 是 完全 
一 伊 的 ， 使 整个 界面 看 起 来 既 丰 高 又 统一 。 


“SofBank 二 si 


图 ”flickpics 


BCE NPOeKTE| 


= NEAM 
Mona, rpacora 


CoOTa WH 230p086e 


届 | 3AOPOBbE 


EDme3HM， n PenapaTe, anTees 


四 加 削 
驴友 加 
不 由 和 


Takuto Nishioka 1 7 en 


Takuts Nishisks 


8-7 iOS 平台 的 “FlickPics”( 左 图 ).Android 平台 的 “Circle”( 中 图 ) Windows Phone 平台 的 “Mail. 
Ru”( 右 图 ) 
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当然 ， 图 标 设 计 的 一 致 性 原则 并 不 仅仅 表现 在 上 述 的 3 个 方面 ， 但 这 几 个 万 面 是 比较 重要 和 儿 须 遵守 
的 。 有 时 我 们 还 会 在 设计 过 程 中 遇 到 一 些 特殊 情况 ， 也 应 该 遵循 一 致 性 原则 ， 比 如 为 系列 应 用 设计 图 标 时 ， 
或 者 为 针对 相同 用 户 群 体 的 应 用 产品 设计 图 标 时 等 。 


8.1.3 ”图标 设计 的 “兼容 性 ”原则 


在 为 移动 设备 的 应 用 设计 图 标 时 ， 必 须 考 虑 移动 设备 的 独特 性 ， 包 括 屏 需 尺寸 、 像 素 的 多 少 以 及 界面 的 
风格 。 同 时 ,还 要 考虑 在 不 同 的 环境 、 模 式 和 情境 下 使 用 这 些 图 标 ， 这 残 是 我 们 所 要 求 的 图 标 设计 的 兼容 性 。 
很 多 有 能 力 的 设计 师 总 是 把 图 标 制 作 得 既 复 杂 又 细 腊 ， 斋 望 通过 精美 绝伦 的 图 标 鹃 引用 户 的 眼球 以 提 
升 应 用 的 档次 和 格调 。 但 是 当 我 们 把 精心 设计 的 图 标 放 置 在 移动 界面 狭小 的 屏 需 上 观察 时 ， 却 友 现 效果 平 
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平 ， 细 节 尽 失 ， 甚 至 有 时 候 让 人 感到 模糊 不 清 。 因 此 ， 成 熟 的 设计 师 会 在 设计 图 标的 时 候 尽 可 能 地 从 简约 
的 图 形 入 手 ， 反 复 测 试 ， 使 目 己 的 作品 在 不 同 大 小 、 不 同 环境 下 都 能 够 彰显 出 和 革 目 的 视 兑 体验。 那么 ， 我 
们 应 该 从 哪些 环 石 上 注意 图 标的 兼容 性 呢 ? 

首先 是 尺寸 和 像素 的 大 小 。 我 们 以 苹果 产品 iPhone 为 例 ， 虽 然 在 一 般 情况 下 iPhone 桌面 上 的 启动 
图 标的 规格 大 小 是 114 x 114 像素 ， 也 残 是 9 毫米 见 万 的 大 小 。 但 是 在 一 些 特殊 情况 下 ， 我 们 设计 出 来 的 
图 标 会 以 比较 大 或 者 非常 小 的 尺寸 来 显示 ， 如 图 8-8 所 示 。 因 此 ， 在 设计 时 我 们 融 要 尽 可 能 把 放大 和 缩 
小 之 后 的 效果 考虑 进去 。 


加 电话 > 


®@ | FaceTime > 
Safari > 
品 信息 > 


可 一 时 时钟 Game Centec 投 刊 闪 志 。， 加 : 音乐 > 


8-8 ”1iOS 的 启动 图 标 在 iPhone 桌面 上 ( 左 图 )、iPhone 系统 设置 里 ( 中 图 ) 和 App Store 的 应 用 简介 里 ( 右 图 ) 


从 图 8-8 中 可 以 看 到 ， 虽 然 我 们 头脑 概念 中 的 启动 图 标 都 是 在 移动 设备 桌面 上 显示 的 ， 但 是 在 一 些 
诸如 系统 设置 、 应 用 的 扩展 链接 或 者 应 用 商店 里 都 会 以 不 同 的 大 小 或 方式 来 显示 启动 图 标 。 在 iPhone 的 
系统 设置 中 ， 图 标 显示 为 29 x 29 像素 ， 也 就 是 4 毫米 见方 的 大 小 。 而 在 App Store 的 应 用 简介 里 ， 
标 达到 了 175 x 175 像素 ，50 毫米 见方 。 因 此 ， 在 设计 iOS 平台 的 启动 图 标 时 ， 一 定 要 在 这 两 个 尺寸 中 
进行 视 涡 比较 和 兼容 性 测试 。 

在 图 8-9 中 ， 我 们 列 出 了 3 款 iOS 应 用 的 测试 结果 。 AppAdvice ”比较 成 功 ， 无 论 在 任何 尺寸 
下 都 能 够 清晰 、 准 确 地 表现 出 整体 创意 和 图 像 细 节 。 对 于 “WorldCard” 的 启动 图 标 ， 虽 然 其 制作 细节 

语 且 精细 ， 但 是 由 于 画面 缺乏 整体 感 ， 且 缺乏 视觉 主体 ， 所 以 图 标 缩 小 后 不 但 视觉 含混 而 且 细 节 尽 失 。 
-Urbanspoon ”启动 图 标的 问题 也 非常 普遍 ， 虽 然 在 图 标 上 使 用 文字 非常 有 利于 市 场 推广 ， 但 是 如 果 文 
字 过 多 ， 反 而 无 法 看 清和 识别 ， 尤 其 是 缩小 之 后 会 显得 非 惠 模糊 和 粗糙 。 


Worldcard 


” -了 Urbanspoon 


Cy 


图 8-9 iOS 平台 的 “AppAdvice”( 左 图 )、“WorldCard”( 中 图 ) 和 “Urbanspoon”( 右 图 ) 启动 图 标 
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另外 ， 我 们 还 要 考虑 图 标的 使 用 环境 。 这 里 主要 讨论 在 不 同 的 搬 色 和 背景 下 显示 图 标的 视 竞 效果， 
因为 应 用 平台 的 色彩 主题 可 以 随意 更 换 ， 果 面 的 背景 图 案 也 可 以 随意 挑选 ， 各 个 应 用 商店 的 色彩 背景 
各 不 相同 。 在 这 种 情况 下 ， 并 不 是 把 图 标的 色彩 设计 得 越 鲜艳 、 细 节制 作 得 越 丰 早 ， 残 越 能 吸引 眼球 。 
一 般 来 说 ， 色 彩 明暗 对 比较 强 的 图 标 ， 能 够 适应 各 种 不 同 的 背景 环境 ， 无 论 企 多 么 复杂 的 背景 下 ， 痢 能 
够 凸显 出 明确 的 视 腕 效果 。 而 明暗 对 比较 弱 的 图 标 则 容易 被 环境 颜色 所 影响 而 变 得 难以 识别 或 无 法 清晰 
地 显示 。 

通过 图 8-10 我 们 可 以 明显 地 感 沉 到 不 同 明 蜡 对 比 的 环境 兼容 性 。 Find MyHeadset” 应 用 的 启动 
图 标 由 于 明暗 对 比 强 烈 , 所 以 无 论 在 任何 背景 下 ,甚至 在 与 它 色 调 相 同 的 背景 下 , 都 能 够 被 清晰 地 识别 出 来 。 
而 “FIT 便签 ”应 用 的 启动 图 标 虽 然 细 节 丰 富 、 制 作 精 细 ， 但 是 由 于 色彩 明暗 对 比较 弱 ， 所 以 在 浅 色 背 景 、 
同色 调 背 景 和 多 色调 背景 上 都 不 是 很 清晰 、 明 确 。 


Ea 


图 8-10 ” ”Android 平台 的 “Find MyHeadset” 应 用 启动 图 标 ( 左 图 ) 和 “FIT 便签 ”应 用 启动 图 标 ( 右 图 ) 


在 兼容 性 原则 这 块 ， 还 有 一 个 方面 不 得 不 提 一 下 ， 那 就 是 能 否 适 应 黑 晶 使 用 或 单 色调 使 用 。 里 然 应 用 
的 局 动 图 标 几 乎 没有 可 能 会 在 单 色 或 黑白 模式 下 使 用 ， 但 是 应 用 内 部 的 工具 栏 图 标 在 很 多 情况 下 都 要 在 黑 
白 或 单 色情 况 下 显示 ， 因 为 五 颜 六 色 的 工具 栏 图 标 会 把 界面 搞 得 喧 宾 夺 主 、 凌 乱 不 堪 。 因 此 在 设计 此 类 图 
标的 过 程 中 ， 我 们 一 定 要 充分 考虑 到 在 彩色 状态 下 、 双 色 状 态 下 以 及 单 色 状 态 下 显示 起 来 会 不 会 有 明显 的 
差别 ， 之 后 再 尽量 减 小 或 弱化 差别 ， 最 终 使 用 户 在 任何 模式 下 都 不 会 对 它 产 生 收 义 。 

在 图 8-11 中 可 以 看 到 ，iOS 平台 的 “Things ”应 用 的 工具 栏 图 标 无 论 在 彩色 、 单 色 还 是 灰 度 模式 下 
都 非常 清晰 、 明 确 且 不 会 产生 视觉 误差 ， 而 Windows Phone 平台 的 “Get Reimbursed” 的 工具 栏 图 标 
的 效果 残 不 大 理想 ， 由 于 图 标的 图 形 化 不 强 ， 加 上 色调 不 统一 ， 造 成 在 不 同 的 色彩 模式 下 无 法 明确 显示 和 且 
容易 产生 歧义 。 
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8-11 iOS 平台 的 “Things ”工具 栏 图 标的 兼容 性 测试 ( 左 图 ) 和 Windows Phone 平台 的 “Get Reimbursed 工具 栏 图 标的 兼 
容 性 测试 ( 右 图 ) 
通过 这 两 个 案例 ， 我 们 也 更 加 理解 了 在 各 种 环境 下 对 图 标 进行 兼容 性 和 可 用 性 测试 的 重要 性 。 同 时 ， 
遵循 以 上 所 提 到 的 图 标 设 计 原则 ， 是 保障 应 用 在 图 标 设计 这 个 关键 环 证 不 出 问题 、 不 挥 链子 的 关键 。 但 是 ， 
能 不 能 设计 出 吸引 眼球、 视 党 突出 、 意 义 深远 的 图 标 ， 仪 仅 靠 避 守 原则 是 无 法 达到 的 。 接 下 来 ， 我 们 将 继 
续 深 入 探讨 如 何 循序 渐进 地 打造 出 完美 的 移动 应 用 图 标 。 


8.2 局 动 图 标 


第 一 次 约会 ， 我 们 肯定 会 把 目 己 打扮 一 瘟 ， 最 起 码 也 得 干净 整洁 。 原 因 很 简单 ， 为 的 是 给 对 方 留 下 好 
印象 ,而 局 动 图 标 束 是 你 的 应 用 给 用 尸 留 下 的 第 一 印象 。 好 印象 可 以 把 大 家 吸引 过 来 ， 从 而 展现 你 的 功能 ， 
友 挥 你 的 魅力 ， 进 一 步 话 得 大 家 的 信任 。 而 如 果 第 一 印象 平淡 或 者 无 法 给 人 留 下 印象 ， 虽 然 不 会 让 你 的 应 
用 立刻 家 删 挥 ， 但 是 大 家 从 心理 上 已 经 不 会 对 使 用 你 的 应 用 报 以 很 高 的 热情 。 如 果 第 一 印象 很 状 ， 那 么 大 
家 到 怕 连 试 一 下 的 心情 都 不 会 有 。 所 以 ， 设计 好 应 用 启动 图 标的 重要 性 不 言 而 噜 。 我 们 设计 局 动 图 标的 目 
标 丈 是 要 建立 完美 的 第 一 印象 。 


8.2.1 建立 完美 的 第 一 印象 


对 于 移动 应 用 来 况 ， 用 户 第 一 眼看 到 的 丈 是 应 用 的 局 动 图 标 。 当 我 们 打开 移动 应 用 商店 ， 映 入 眼帘 的 
是 成 王 上 万 个 应 用 ， 其 中 包括 应 用 的 图 标 、 名 称 以 及 价格 ， 而 页 面 上 最 耀眼 的 元 素 肯定 是 应 用 的 局 动 图 标 。 
它们 通 单 是 成 群 出 现 的 , 所 以 你 的 设计 一 定 要 想 万 设法 吸引 眼球 , 从 它们 中 间 脐 笑 而 出 。 和 皇 么 才能 做 到 呢 ? 

1. 视 党 中 心 

目 先 ， 丈 是 要 有 一 个 明确 的 视 千 中 心 。 视 膨 中 心 是 捐 在 你 的 图 标 里 一 定 要 有 一 个 明确 而 啊 亮 的 主体 ， 
和 而 这 个 主体 最 好 位 于 男 面 的 中 心 。 这 样 ， 整 个 图 标 束 有 了 灵魂 或 者 说 是 凝聚 力 。 

图 8-12 中 的 3 个 图 标 都 利用 了 圆 形 明 确定 义 了 图 标的 视 党 中 心 ， 使 图 标 充 满 了 凝聚 力 和 同心 力 ， 很 
容易 给 人 留 下 深刻 的 印象 。 而 图 8-13 中 的 3 个 图 标 束 没有 在 画面 上 确定 视 党 中心 ， 图 标 显得 松散 无 骨 ， 
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没有 主体 ， 无 法 从 视 冤 上 找到 焦点 从 而 给 人 留 下 明确 的 视 党 印象 。 
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图 8-12 iOS 平台 的 “Skee-Ball”( 左 图 )、Android 平台 的 “Google 潮流 同 
步 ”( 中 图 )、Windows Phone 平台 的 “ 星 图 ”( 右 图 ) 
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图 8-13 iOS 平台 的 “Coin Push Frenzy”( 左 图 )Android 平台 的 “DCikonZ 
ADW Apex”( 中 图 )、Windows Phone 平台 的 “Windows Phone 
News”( 右 图 ) 


视 腕 中 心 大 部 分 情况 下 应 处 在 画面 的 中 心 点 ,但 根据 创意 的 需要 或 者 图 形 的 重心 , 位 置 可 以 有 所 偏离 ， 


但 是 一 定 要 在 形式 上 确保 它 视听 上 的 中 心 感 ， 示 例 图 如 图 8-14 所 示 。 


图 8-14 iOS 平台 的 “PPTV”( 左 图 )、Android 平台 的 “高 清 手 机 电视 ”( 中 
)、Windows Phone 平台 的 “Radio Lounge UK”( 右 图 ) 


2. 造型 简约 
视 完 中 心 确定 之 后 ， 下 一 步 束 是 要 确保 它 能 够 吸引 住 眼球 ， 怎 么 吸引 1? 一 个 


图 8-15 iOS 平台 的 “Shazam”( 左 图 ).Android 平台 的 “VPlayer” ( 
Windows Phone 平台 的 “高 德 地 图 ”( 右 图 ) 


是 要 尽量 使 用 简约 的 图 
形 作为 视 膨 中 心 的 造型 ， 因 为 图 形 越 简单 ， 束 越 容 易 把 视 嘻 印象 快速 固定 下 来 ， 印 在 脑海 里 ， 示 例 图 如 图 
8-15 所 示 。 而 复杂 的 图 形 或 图 案 使 视 党 印象 分 散 且 不 易 看 履 ， 从 而 无 法 留 下 深刻 的 视 完 印 象 。 
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图 8-16 中 的 3 个 图 标 虽然 都 有 一 个 比较 明确 的 视 党 主体 ， 但 是 由 于 这 个 视 党 主体 的 图 形 或 内 容 过 于 
复杂 或 者 凌 想 ， 效 果 反 而 不 如 图 8-15 所 示 的 3 个 图 标 ， 无 法 给 和 信 留 下 深刻 的 视 吕 印象 。 


8-16 iOS 平台 的 “The Electric Company Wordball”( 左 图 )、Android 平台 的 “Thomson 
Reuters News”( 中 图 )、Windows Phone 平台 的 “Horoscope”( 右 图 ) 


3. 色彩 对 比 
一 个 吸引 眼球 的 方法 就 是 强烈 的 色彩 对 比 。 关 于 色彩 搭配 的 问题 ， 我 们 在 上 一 章 中 已 经 做 了 比较 详 

细 的 讲解 ， 但 是 针对 图 标 设 计 ， 我 们 还 需要 进一步 阐述 。 要 得 到 突出 或 强烈 的 视 党 效果 ， 需 要 使 色彩 对 比 
强烈 ， 大 家 在 提 到 色彩 的 对 比 时 ， 疏 怕 直 接 会 认为 是 色相 上 的 对 比 ( 如 互补 色 或 对 比 色 )， 但 是 在 我 们 已 
经 了 解 了 色彩 的 属性 后 ， 对 比 可 以 变 得 更 多 样 化 ， 比 如 之 前 ( 如 图 8-10 所 示 ) 提 到 的 色彩 明暗 上 的 对 比 ， 
还 可 以 尝试 色彩 纯度 上 的 对 比 。 

8-17 中 的 3 个 图 标 主要 在 色彩 的 色相 上 进行 了 鲜明 的 对 比 处 理 。iOS 平台 的 “Flickit ”使 用 了 对 
比 色 处 理 ， 加 上 黑色 背景 的 反衬 使 图 形 和 色彩 都 非常 清晰 。Android 平台 的 “Gogobot 虽然 颜色 较 多 
但 是 使 用 了 日 色 线 条 进行 了 分 隔 ， 所 以 色彩 之 间 非 常 和 谐 、 鲜 明 。 而 Windows Phone 平台 的 “Mail. 
Ru ”直接 选择 了 一 对 补 色 ， 使 色彩 的 鲜明 对 比 达到 了 极致 ， 视 党 上 肯定 是 非常 突出 的 ， 只 是 有 时 过 于 强 


烈 的 对 比 容易 使 人 感到 紧张 或 极 站 。 


图 8-17 iOS 平台 的 “Flickit 、Android 平台 的 “Gogobot”( 中 图 )、Windows Phone 
平台 的 “Mail.Ru” 7 


图 8-18 中 的 3 个 图 标 是 在 确定 了 基础 色调 后 , 在 明暗 度 或 纯度 上 作文 章 , 使 图 标 在 色彩 上 形成 鲜明 、 
强烈 的 对 比 ， 从 而 增强 视 竞 冲击 力 。 
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8-18 iOS 平台 的 “Instacast 3”( 左 图 )、Android 平台 的 “Tagesschau”( 中 图 )、 
Windows Phone 平台 的 “Woman Calendar Lite”( 右 图 ) 


4. 细节 精美 

里 然 我 们 一 再 强调 局 动 图 标的 设计 要 以 三 大 原则 以 及 整体 的 视 沉 站 击 力 为 主 ， 但 是 精美 的 细节 也 是 绝 
不 可 忽视 的 。 一 个 完美 的 图 标 设计 ， 乃 至 整个 应 用 的 界面 设计 ， 没 有 精致 的 、 能 经 得 起 细心 品味 的 细节 设 
计 是 绝对 不 行 的 。 即 使 创意 出 拥有 强烈 视觉 效果 的 图 标 ， 但 是 如 果 制 作 粗糙 ， 细 节 平 良 ， 也 会 使 用 户 的 心 
理 满意 度 大 打折 扣 。 接 下 来 ,根据 你 的 界面 风格 和 图 形 特点 ， 无 论 是 壳 真 的 拟 物 化 效果 ， 还 是 简约 的 局 平 
化 风格 , 甚至 是 市 有 三 维 空间 的 特效 , 让 我 们 充分 友 挥 出 自己 的 想象 力 和 表现 力 , 把 每 一 个 图 形 转 角 、 起伏、 
渐变 以 及 姓 透 效果 打造 得 精美 细 甩 ， 品 味 十 足 。 

8-19 中 的 三 款 启 动 图 标 都 是 设计 优秀 且 做 工 精 良 的 典范 。iOS 平台 的 “Top DJ 采用 了 平台 一 贯 
的 隐喻 手法 ， 把 这 个 唱 盘 机 制作 得 可 以 说 是 惟妙惟肖 ， 光 泽 、 质 感 和 体积 感 都 把 握 得 精美 细 肝 。Android 
平台 的 “Wondershare Player 虽然 没有 使 用 隐喻 的 手法 ， 但 借助 拟 物化 的 细节 处 理 风 格 ， 把 一 个 平凡 
简单 的 图 标 进 行 了 精心 的 修饰 ， 精 雕 细 刻 、 抛 光 打 磨 ， 使 它 散 发 着 雅 格 丽 材质 的 味道 。Windows Phone 
平台 的 “SoundHound ”虽然 采用 了 平台 一 贯 的 局 平 化 风格 处 理 图 形 ， 但 是 也 可 以 打破 常规 地 添加 一 些 
细微 的 阴影 和 纹理 ， 使 图 标 产 生 了 空间 和 体积 感 ， 变 得 超凡 脱俗 。 


8-19 iOS 平台 的 “Top DJ”( 磊 图 ).Android 平台 的 “Wondershare Player”( 中 图 )、 
Windows Phone 平台 的 “SoundHound”( 右 图 ) 


当然 ， 从 上 面 的 实例 里 我 们 也 体会 到 了 软件 技术 对 图 形 处 理 的 重要 性 。 我 们 学 习 一 个 软件 ( 这 里 主要 
是 Photoshop )， 不 单单 要 了 解 它 的 功能 ， 更 重要 的 是 能 不 能 随心 所 欲 地 去 各 双 和 精心 细致 地 去 推 宫 这 些 
功能 ， 而 我 认为 最 重要 的 是 能 含 从 优秀 作品 里 得 到 并 积累 处 理 细节 的 经 验 ， 并 把 这 些 经 验 为 我 所 用 。 如 果 
能 够 达到 ， 成 为 图 标 设计 高 手 绝 不 是 难事 。 
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本 万 主 要 探讨 了 如 何 使 你 的 局 动 图 标 吸引 眼球 ， 全 于 构思 和 创 昌 的 万 法 ， 我 们 会 在 之 后 的 章 世 里 继续 
前 述 。 但 是 在 这 之 前 ， 我 们 必须 对 三 大 平台 的 局 动 图 标的 设计 规范 和 制作 规格 有 一 个 全 面 的 认识 ， 否 则 我 
们 可 能 会 把 局 动 图 标 设计 得 不 伦 不 类 而 显得 很 不 专业 。 


8.2.2 三 大 平台 局 动 图 标 设 计 规范 


虽然 前 面 曾经 提 到 ， 局 动 图 标的 设计 企 三 大 平台 面前 要 遵守 一 致 性 原则 ， 但 是 三 大 平台 在 其 设计 要 求 
上 还 是 有 一 泽 郑 别 的 。 因 此 ， 我 们 在 对 应 用 进行 跨 平 台 移 植 的 时 候 ， 要 权衡 好 这 之 间 的 天 系 。 下 面 我 们 逐 
一 介绍 各 个 平台 的 局 动 图 标 设 计 规范 。 

1. iOS 平台 局 动 图 标 设 计 规 范 

iOS 平台 的 局 动 图 标 设计 的 特点 可 以 说 是 非常 明显 的 ， 示 例 图 如 图 8-20 所 示 。 


提醒 事项 


图 8-20 ”iOS 平台 的 启动 图 标 


图 标的 轮廓 一 律 采 用 圆 角 和 窍 形 ， 大 多 采用 隐喻 的 手法 表达 应 用 的 功能 或 状态 。 图 标 辰 部 市 有 淡淡 的 阴 
影 ， 使 图 标 从 视 况 上 看 像 是 漂浮 在 昌 面 上 的 。 有 些 图 标 上 市 有 玻璃 光泽 的 反射 阴影 ， 符 合乎 果 系 统 传 统 的 
水 晶 质 感 。 然 而 ,我们 在 绘图 软件 里 制作 图 标的 时 候 , 只 需要 做 成 图 8-21 所 示 效 果 的 PNG 格式 残 可 以 了 ， 
完全 没有 必要 上 自己 动手 添加 上 述 这 些 效果 。 


图 8-21 51work6 团队 设计 的 iOS 平台 启动 图 标 ,， “LeBallon (〈 左 图 ) “SaPaint 
(中 图 )、“Shaking Sound ( 右 图 了 


当 你 把 设计 、 制 作 完 成 的 应 用 上 传 到 iOS 平台 时 ，iOS 系统 会 目 动 在 启动 图 标 上 添加 一 些 上 述 的 视 
沉 效 果 以 使 其 保持 和 系统 内 置 图 标的 一 致 性 。 这 里 iOS 系统 对 图 8-21 所 示 的 局 动 图 标 添 加 了 圆 角 效 果 、 
阴影 和 反射 区， 得 到 如 图 8-22 所 示 的 效果 。 
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8-22 ”iOS 系统 会 自动 在 启动 图 标 上 添加 的 效果 


为 了 保持 桌面 视觉 上 的 整齐 划一 ， 圆 角 效 果 和 阴影 是 每 个 图 标 必须 添加 的 ， 但 是 玻璃 反射 光 的 效果 是 
可 选 的 ， 根 据 自己 图 标的 视觉 需要 决定 是 否 添加 。 切 记 ， 不 要 在 制作 iOS 启动 图 标的 时 候 使 用 透明 背景 和 
Alpha 通道 。 

至 于 图 标的 尺寸 ,iPhone 手机 ( 包括 iPod touch ) 的 桌面 图 标 是 114x 114 像素 ,iPad ( 包括 
iPad mini ) 的 桌面 图 标 是 140 x 140 像素 。 但 是 ， 当 你 提交 应 用 时 ， 必 须 提供 1024 x 1024 像素 大 小 的 
启动 图 标 以 供 在 App Store 中 显示 。 而 且 我 们 不 能 把 现 有 的 小 尺寸 图 标 直接 放大 ， 这 样 会 丢失 细节 ， 我 们 
必须 在 设计 一 开始 的 时 候 ， 就 以 1024 x 1024 像素 的 尺寸 创建 文件 ， 这 样 才能 保证 在 任何 情况 下 细节 清 
晰 而 不 丢失 。 

2. Android 平台 启动 图 标 设计 规范 

从 表面 上 看 ，Android 平台 启动 图 标的 个 性 似乎 并 不 是 很 明显 ， 不 像 其 他 两 大 平台 有 明确 的 外 形 规范 
和 独特 的 视觉 语言 (iOS 逼真 的 隐喻 效果 ，Windows Phone 的 扁平 化 风格 )。 但 实际 上 它 也 有 一 套 属于 
自己 平台 的 个 性 化 图 形 处 理 方式 。 作 为 设计 师 ， 我 们 必须 对 Android 平台 的 特点 进行 深入 的 了 解 和 比较 。 
一 般 情 况 下 ， 我 们 在 Android 移动 设备 桌面 上 看 到 的 启动 图 标 通 常 是 图 8-23 这 样 的 。 


8-23 Android 平台 的 启动 图 标 


首先 ，Android 平台 的 局 动 图 标 没有 标准 的 外 形 约 束 ， 图 标的 图 形 边缘 融 是 图 标的 轮廓 。 因 此 ， 我 们 
在 为 图 标 设计 图 形 造 型 的 时 候 要 格外 注意 ， 尽 量 使 用 简约 的 外 形 或 者 符号 化 的 图 形 作 为 图 形 主体 ， 否 则 看 
上 去 会 显得 很 不 规则 。 有 的 设计 师 为 了 避免 图 形 边 绿 或 轮廓 的 问题 ， 直 接 治 用 了 iOS 或 Windows Phone 
的 图 标 形式 ， 加 入 了 圆 角 矩形 或 正方 形 边缘 ， 其 中 一 些 Android 原生 应 用 就 采用 这 样 的 处 理 方法 。 虽 然 这 
样 的 处 理 并 无 不 当 ， 但 是 在 细节 处 理 上 绝 不 能 与 其 他 平台 雷同 ， 这 主要 表现 在 圆 角 算 形 的 转角 大 小 上 。 
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从 图 8-24 中 可 以 看 到 ，Android 平台 的 司 动 图 标 在 处 理 圆 角 窍 形 的 转角 时 ， 圆 角 的 半径 要 明显 小 
于 iOS 平台 局 动 图 标的 图 形 转角 ， 而 且 Android 平台 的 图 形 细 市 使 用 了 一 个 独特 的 立体 正面 视角 。 看 起 
来 稍微 有 点 从 上 往 下 的 透视 效果 ， 使 用 尸 能 看 到 一 些 景 深 。 看 来 ， 我 们 在 设计 和 制作 Android 平台 的 局 
动 图 标 时 ， 必 须 注 意 并 把 握 这 些 细 世 ， 人 否则 一 味 地 模仿 其 他 平台 的 处 理 万 法 会 给 人 留 下 粗糙 或 山寨 品 的 
印象 。 


1OS Android 


图 8-24 iOS 平台 和 Android 平台 的 局 动 图 标的 图 形 特 点 


由 于 Android 平台 的 移动 设备 种 类 、 大 小 和 规格 繁多 ， 不 像 iOS 平台 的 产品 相对 国定， 所 以 启动 图 
标的 像素 和 尺寸 的 规格 很 难 确定 。 一 般 设备 的 大 小 是 48 x 48 像素 ， 而 在 电子 市 场 中 显示 的 大 小 必须 达到 
512 x 512 像素 ， 所 以 我 们 在 设计 和 制作 Android 平台 的 启动 图 标 时 ， 统 一 按照 512 x 512 像素 来 生成 文 
件 并 上 传 。 

3. Windows Phone 平台 启动 图 标 设计 规范 

与 之 前 的 两 大 平台 相 比 ，Windows Phone 平台 无 论 从 操作 体验 上 还 是 视 党 体验 上 都 非常 独特 。 单 从 
启动 图 标的 表现 形式 来 看 ， 它 就 极 具 个 性 化 。 在 Windows Phone 平台 的 移动 设备 桌面 上 ， 我 们 看 到 的 并 
不 是 应 用 的 启动 图 标 ， 而 是 由 多 个 大 小 不 同 的 “启动 磁 贴 ”拼接 而 成 的 。 这 些 磁 贴 都 由 正 反 两 面 构成 ， 当 
收 到 推送 通知 时 ， 它 们 会 翻转 过 来 显示 内 容 或 消息 。 只 有 进入 到 程序 列表 时 ， 才 能 看 到 启动 图 标 。 

从 图 8-25 中 我 们 可 以 清晰 地 体会 到 Windows Phone 平台 启动 图 标的 简约 、 清 晰 、 拒 绝 一 切 装饰 
和 特效 的 扁平 化 设计 风格 。 当 然 ， 这 种 风格 也 不 是 一 成 不 变 的 ， 有 了 时 为 了 兼顾 其 他 平台 的 统一 性 原则 ， 或 
者 完成 一 些 纯 个 性 化 的 U 设计 ， 我们 可 以 对 图 标 风 格 进行 细微 改动 ( 如 图 8-26 所 示 )， 比 如 加 入 丰富 的 
色调 、 添 加 纹理 或 者 少量 的 立体 效果 等 。 我 们 不 推荐 对 Windows Phone 启动 图 标的 设计 风格 做 太 大 的 
或 者 颤 禾 性 的 改变 ， 这 样 容易 使 应 用 形 失 与 平台 上 其 他 应 用 的 统一 性 和 默契 感 ， 除 非 你 希望 目 己 的 作品 格 
格 不 入 或 者 看 上 去 很 另类 。 
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8-25 ”Windows Phone 8 的 启动 屏幕 ( 左 图 ) 和 开始 屏幕 ( 右 图 ) 
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图 8-26 Windows Phone 平台 启动 图 标 设计 ,“Birthday Reminder”( 左 图 ) “Tech News 
Now”( 中 图 )、“Ringtones”( 右 图 ) 


天 于 Windows Phone 平台 局 动 图 标的 设计 规格 ， 我 们 一 般 要 考虑 到 如 下 4 种 情况 。 
。 程序 列表 的 局 动 图 标 ， 尺 十 是 62 x 62 像素 。 

。 启动 画面 的 小 磁 贴 ， 尺 寸 是 126 x 126 像素 。 

。 启动 画面 的 大 磁 贴 ， 尺 寸 是 210 x 210 像素 。 

。 有 时 会 把 两 个 大 磁 贴 合并 成 一 个 长 方形 的 磁 贴 ， 尺 寸 是 432 x 210 像素 。 
Windows Phone 商城 上 的 应 用 程序 图 标 也 要 考虑 3 种 尺寸 ， 具体 如 下 所 示 。 

。 手机 上 的 商品 目录 小 磁 贴 ， 尺 寸 是 99 x 99 像素 。 

。 手机 上 的 商品 目录 大 磁 贴 ， 尺 寸 是 173 x 173 像素 。 

。 电脑 上 的 商品 目录 磁 贴 ， 尺 寸 是 200 x 200 像素 。 
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但 是 以 上 的 7 个 设计 规格 我 们 不 能 像 其 他 两 大 平台 一 样 ， 只 制作 出 最 大 尺寸 惑 可 以 ,其 他 成 比例 缩小 ， 
而 是 需要 每 一 个 规格 尺寸 单独 制作 生成 文件 。 上 毕竟 同 一 个 图 形 放 在 不 同 的 空间 或 大 小 中 的 视 完 感 受 是 不 同 


的 ，, 越 是 简约 的 图 形 ， 越 需要 仔细 地 对 细节 和 空间 位 置 进行 推敲 。 针 对 各 种 磁 贴 上 图 标 和 空间 的 位 置 关 系 ， 
我 们 可 以 参考 Windows Phone 平台 官方 的 标准 比例 关系 ， 如 图 8-27 所 示 。 


8-27 
| 四 Windows Phone 平台 图 标 位 置 


与 磁 贴 大 小 的 比例 关系 
gent 


大 磁 贴 合并 


大 人 磁 贴 


了 解 了 各 个 平台 图 标 设计 的 规 光 要 求 和 实际 风格 ， 下 面 束 可 以 大 胆 地 放手 去 设计 了 。 下 面 我 们 介绍 几 
个 有 效 的 设计 思路 ， 帮 助 大 家 打开 思维 ,展开 联 想 ， 设 计 出 完美 的 、 有 吸引 力 的 局 动 图 标 。 


8.2.3 ” 几 个 简单 的 局 动 图 标 设计 思路 


第 一 个 比较 有 效 的 思路 是 直接 借 黎 应 用 的 界面 设计 ， 包 括 材质 、 样 式 和 色调 。 比 如 如 果 我 们 在 设计 办 
面 的 时 候 使 用 了 隐喻 并 拟 物化 的 方式 ， 那 么 在 设计 局 动 图 标 时 不 防 把 隐喻 进行 到 底 ， 把 我 们 的 拟 物 对 象 代 
缩 在 图 标 里 ， 再 经 过 细致 的 调整 。 这 个 思路 的 好 处 是 能 提高 视 竞 上 的 整体 协调 和 识别 性 ， 大 家 一 看 到 图 标 ， 
束 能 够 清楚 里 面 的 内 容 和 功能 。 图 标 设 计 比 较 忌讳 给 人 和 神秘、 难以 琢磨 的 感 先 ， 一 定 要 和 直 来 直 去 ， 不 要 让 
用 尸 猜 测 ， 这 样 也 比较 容易 提高 用 户 的 起 诚 度 。 

图 8-28 中 的 3 款 应 用 融 是 适当 地 沿用 了 应 用 界面 的 斋 色 、 样 式 以 及 拟 物 对 象 ， 使 图 标的 设计 工作 亦 
得 水 到 渠 成 ， 简 单 容易 。 但 是 细节 一 定 要 推 歌 把 握 好 ， 干 万 不 要 为 了 图 省 事 而 后 率 应 对 ， 局 动 图 标 是 你 应 
用 的 第 一 面孔 ， 要 做 得 比 界 面 还 要 精致 。 

第 二 个 思路 是 针对 应 用 的 功能 特点 ， 设 计 一 个 类 似 指示 有 牌 的 图 形 ， 来 告诉 用 户 应 用 的 功能 是 什么 ,或 
者 说明 功能 的 长 处 或 特点 。 这 种 万 法 的 关键 在 于 既 要 一 针 见 血 地 把 你 要 表达 的 事情 说 清楚 ， 又 要 保持 图 像 
的 美观 和 个 性 。 这 种 方法 的 优点 是 同时 起 到 了 解释 说 明和 广告 宣传 的 作用 ， 而 且 比 较 直观 。 但 是 很 容易 和 
同类 的 应 用 产生 相同 的 创意 ， 比 如 我 们 看 到 应 用 商店 里 所 有 摄影 类 的 应 用 几乎 干 篇 一 律 地 使 用 相机 镜头 的 
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图 像 ， 大 量 的 音乐 播放 应 用 都 使 用 耳机 的 图 形 作 为 局 动 图 标 。 因 此 ， 我 们 要 尽量 在 表明 功能 含义 的 同时 不 
和 其 他 应 用 雷同 。 
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8-28 iOS 平台 的 “Nota”( 左 图 )、Android 平台 的 “QIP Speed Test”( 中 图 )、Windows 
Phone 平台 的 “Bluetooth Tile”( 右 图 ) 


图 8-29 所 示 的 3 款 应 用 的 局 动 图 标 都 是 使 用 指示 牌 万 法 的 成 功 案例 。 即 使 不 介绍 应 用 的 功能 ， 通 过 
图 标 ， 我 们 也 能 很 清楚 地 了 解 应 用 的 类 别 、 功 能 和 特点 。 


8-29 iOS 平台 的 “Lose it”( 左 图 )、Android 平台 的 “App Lock”( 中 图 )、 
Windows Phone 平台 的 “gMaps”( 右 图 ) 


第 三 个 思路 是 针对 功能 比较 抽 和 的 一 类 应 用 ， 信 助 上 一 个 思路 模式 ， 仅 仪 通过 一 个 图 形 或 者 符号 很 难 
况 清 应 用 的 功能 特点 。 这 个 时 候 ， 干 脆 放 径 挤 示 牌 的 方式 ， 围 绕 着 应 用 的 标题 或 者 概念 特点 ， 设 计 一 个 市 
有 标志 性 的 视 党 形象 、 品 牌 符号 或 者 吉祥 物 。 束 像 我 们 熟 和 的 Twitter 图 标 上 的 蓝 色 小 乌 一 样 ， 在 意象 上 

给 你 的 应 用 附加 上 一 个 品牌 文化 。 这 种 万 式 的 优点 是 创意 性 强 ， 个 性 鲜明 ， 很 容易 在 众多 的 应 用 图 标 中 脱 
产 而 出 。 
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8-30 所 示 的 3 款 应 用 的 局 动 图 标 采 用 了 创建 标志 性 的 视觉 形象 的 方法 。 Hello Cupcake 是 
一 款 学 习 面 点 制作 步骤 的 应 用 ， 利 用 一 个 鸭子 造型 的 和 蛋糕 达到 了 树立 行业 形象 的 作用 。Android 平台 的 
“GO 果 面 主题 ”通过 一 株 精美 的 小 植物 ， 给 用 户 留 下 深刻 的 品牌 印象 。Windows Phone 平台 的 “Face 
Lens 是 在 照片 头像 上 添加 面具 、 眼 镜 和 头饰 的 小 游戏 ， 通 过 一 个 猴子 的 形象 概括 了 各 种 面具 和 鬼脸 ， 
也 给 应 用 打造 了 一 个 滑 稿 的 外 观 形 象 。 


8-30 iOS 平台 的 “Hello Cupcake”( 左 图 ) Android 平台 的 “GO 桌面 主题 ”( 中 图 )、 
Windows Phone 平台 的 “Face Lens”( 右 图 ) 


很 多 成 功 的 移动 应 用 不 但 家 广大 用 户 所 束 划 ， 而 且 通 过 不 断 地 友 展 和 更 新 ， 已 经 成 为 训 名 的 应 用 品牌 。 
同时 ， 也 有 很 多 知名 品牌 需要 在 移动 应 用 设备 上 开 友 目 己 的 客户 靖 。 面 对 这 样 的 应 用 ， 我 们 的 图 标 设计 反 
而 非 钊 简单 了 。 由 于 应 用 的 针对 性 强 ， 且 品牌 的 如 名 度 局 ， 所 以 直接 利用 品牌 的 Logo 融 可 以 既 恰 当 又 直 
观 地 表现 出 应 用 的 价值 ， 同 时 也 会 被 用 户 所 认可 。 

这 残 是 我 们 的 第 四 个 思路 ， 和 直接 使 用 品牌 的 Logo、 名 称 或 开头 字母 作为 图 标的 图 形 元 素 ， 示 例 图 如 
8-31 所 示 。 然 而 我 们 曾经 提 到 过 ， 商 标 和 图 标 是 有 本 质 区 别 的 ， 因 此 我 们 在 图 标 中 使 用 商标 的 时 候 ， 
前 提 是 商标 的 含义 或 价值 已 经 锐 用 尸 所 熟知， 否则 的 话 设 计 出 来 的 图 标 会 让 人 无 法 理解 ， 不 和 类 所 云 。 
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图 8-31 iOS 平台 的 “Nike+Basketball”( 左 图 )Android 平台 的 “HP ePrint service”( 中 图 、 
Windows Phone 平台 的 “Facebook”( 右 图 ) 


局 动 图 标的 设计 思路 绝 不 仅仅 只 有 我 们 上 述 提 到 的 4 种 ， 更 多 的 好 想法 、 好 创意 、 好 思路 有 竺 大 家 目 
己 去 探索 和 积 鹤 。 只 要 我 们 注意 遵循 图 标 设 计 的 原则 ， 参 考 各 个 移动 平台 的 设计 特点 和 规 沁 要 求 ， 在 这 个 
基础 上 友 挥 自己 超 几 的 想象 力 ， 那 么 设计 出 精彩 的 启动 图 标 束 不 成 问题 了 。 
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8.3 工具 栏 图标 


移动 应 用 的 三 大 平台 在 系统 内 部 都 有 各 目的 一 整套 规 沁 的 工具 栏 图 标 。 针 对 不 同 的 功能 、 探 件 以 及 导 
航 栏 ， 这 些 图 标 都 有 非 党 严 谣 的 对 应 关系 ， 不 可 乱用 。 然 而 ， 各 个 平台 的 工具 栏 图 标 再 多 再 全 也 不 可 能 履 
竺 所 有 的 功能 和 情形 ， 而 且 开 友 者 和 设计 师 的 想象 力 和 创造 力 是 无 穷 的 ， 我 们 经 单 会 友 现 在 进行 界面 设计 
的 时 候 找 不 到 对 应 的 标准 工具 栏 图 标 ， 此 时 我 们 必须 目 己 动手 为 其 量 身 打造 一 个 。 


8.3.1 是 符号 ， 不 是 图 案 


工具 栏 图 标的 主要 作用 是 5| 导 用 户 顺 利 使 用 你 的 应 用 程序 ， 而 不 是 单纯 地 为 了 妆 饰 你 的 应 用 界面 ， 央 
此 我 们 的 工具 栏 图 标 设 计 一 定 要 以 明确 的 提示 、5 引 导 或 警告 为 目的 。 工 具 栏 图 标的 设计 表面 上 看 似乎 不 难 ， 
但 实际 上 需要 设计 师 非 党 局 超 的 造型 能 力 和 软件 图 形 绘制 技术 。 当 然 ， 我 们 可 以 从 网 上 的 图 标 商 店 下 载 一 
些 免费 或 收费 的 图 标 设计 。 

图 8-32 回 我 们 展现 了 大 量 设 计 师 目 创 的 工具 栏 图 标 ， 这 些 图 标 丰 昌 多样 目 细致 规 萎 ， 我 们 可 以 从 中 
体会 到 设计 图 标 时 应 该 遵循 的 万 法 和 理念 。 首 先 ， 工具 栏 图 标 是 以 日 色 为 基础 的 ,也 就是 要 设计 成 黑 日 的 ， 
因为 大 多 情况 下 工具 栏 图 标 都 是 以 音色 或 镁 空 的 形式 显示 的 ， 即 使 需要 添加 色调 ， 也 可 以 在 音色 的 基础 上 
进行 附加 。 同 时 ， 图 形 都 是 以 平 铺 、 剪 影 的 万 式 人 处理 的 ， 尽 可 能 简化 和 清晰 ， 不 做 任何 的 修饰 和 效果 。 最 
关键 的 是 ， 工 具 栏 图 标的 图 形 设计 一 定 要 苯 循 符号 化 的 原则 ， 也 残 是 利用 最 概括 的 手法 ， 直 接 表达 你 所 需 
要 表现 的 对 象 。 
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图 8-32 来 自 “Glyphish” 的 免费 图 标 
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在 设计 过 程 中 ， 我 们 的 出 友 点 不 要 定位 在 绘制 一 个 精美 细作 的 图 案 ， 而 是 转变 一 下 观念 ， 我 们 是 在 制 
作 一 个 便于 识别 并 能 够 留 下 印象 的 符号 。 这 样 ， 我 们 的 工具 栏 图 标 设 计 也 许 会 少 走 很 多 弯路 。 因 为 绘制 图 
案 的 过 程 是 添加 细节 和 抽象 图 形 的 过 程 ， 而 制作 符号 的 过 程 是 简化 图 形 和 直观 表达 的 过 程 。 这 之 间 的 差别 
很 大 ， 而 简约 、 直 观 才 是 我 们 需要 的 结果 ， 只 有 简约 ， 才 能 使 它们 适应 各 种 环境 和 大 小 ; 只 有 直观 ， 我 们 
才 可 以 用 它 代 蔡 文字 。 

在 图 8-33 中 我 们 可 以 看 到 ，iOS 平台 的 “Where To ? ”界面 上 工具 栏 图 标的 设计 就 非常 直观 ， 无 
需 文 字 注 释 就 可 以 知道 图 标的 含义 。Android 平台 的 “News360” 的 工具 栏 图 标 将 图 形 简化 得 非常 得 体 ， 
无 论 是 缩小 还 是 透明 模糊 的 环境 下 都 可 以 清晰 地 识别 出 来 。Windows Phone 平台 的 “THE Footbal 
App ”根据 功能 的 需要 设计 了 一 些 专用 图 标 ， 这 些 图 标 在 与 平台 的 原 有 图 标 共 同 使 用 时 ， 能 够 达到 视 党 上 
的 协调 统一 。 
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8-33 iOS 平台 的 “Where To ? ”( 左 图 )Android 平台 的 “News360”( 中 图 )、Windows Phone 平台 的 “THE Football App” 
( 右 图 ) 


8.3.2 三 大 平台 工具 栏 图 标的 规范 和 含义 


里 然 每 个 平台 的 工具 栏 图 标 设计 规范 略 有 人 不同， 但 是 整体 上 还 是 比较 接近 和 且 不 易 区 分 的 。 为 了 让 大 家 
比较 直观 地 体会 它们 之 间 的 寺 异 和 共性 ,我们 把 三 大 平台 的 部 分 工具 栏 图 标 进行 一 下 对 比 , 如 图 8-34 所 示 。 

我 们 看 到 ， 所 有 的 图 标 都 有 非 党 明确 的 台 义 ， 因 此 在 使 用 这 些 图 标的 时 候 ， 一 定 要 严格 对 应 使 用 ， 不 能 
想当然 地 把 它们 张冠李戴 。 关 于 每 个 图 标的 使 用 方法 ， 可 以 参看 各 个 平台 的 《人 机 界面 指南 六 当然 ， 三 大 
平台 的 图 标 之 间 也 不 能 互 损 。 我 们 在 设计 目 己 的 工具 栏 图 标 时 ， 也 应 该 细心 搓 摩 它们 各 目的 图 形 特点 和 处 理 
细 古 的 万 式 ， 设 计 出 和 平台 风格 配套 的 图 标 作品 。 那 么 ， 在 设计 工具 栏 图 标 时 应 该 遵循 什么 思路 和 万 法 呢 ? 
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图 标 功 能 | elielie Windiws Phone 

1 ”搜索 Q Q je 
2 ”历史 (或 最 近 使 用 ) OO © 

3 。 收藏 或 受 欢迎 的 ) 让 六 交 
4 ” 群 组 (Os: 受 关注 的 ) 二 :es 

5 “推荐 (或 分 享 ) i Ee Wy 
6 下 载 中 » 山 
7 ”联系 人 pa 外 

8 ”设置 .0 
9 更 多 eee ee 
10 ”保存 目 国 
Ii 撰写 固 FY so 
12 ”邮件 4 Ea 
13 ”相机 [器 | 区 
14 ”书签 (标签 ) 国 

15 “喜欢 的 时 舍 
16 ”添加 十 十 
17 ”垃圾 箱 加 车 面 
18 ”管理 LJ 7 es 
19 ”回复 + 个 

20 ”停止 四 X 欠 
21 ”刷新 四 2 他 


图 8-34 ”对比 三 大 平台 的 部 分 工具 栏 图 标 


8.3.3” 几 个 有 效 的 简化 图 像 的 万 法 


前 面 我 们 讲 人 到， 工具 栏 图 标的 特点 应 该 是 简约 、 平 面 、 和 直观， 那么 面 对 一 个 现实 中 的 事物 ， 我 们 怎样 
才能 把 它 简化 成 一 个 简单 精巧 的 图 标 呢 ”这 个 过 程 我们 可 以 分 如 下 三 步 来 完成 ， 示 例 图 如 图 8-35 所 示 。 
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8-35 简化 图 像 的 3 个 步 又 


(1) 确定 事物 的 基本 外 形 。 任 何事 物 都 有 它 的 外 形 ， 有 的 事物 外 形 明 确 、 简 单 ， 如 建筑 、 交 通 工 具 、 
电子 设备 等 工业 产品 ， 有 的 事物 外 形 惑 比较 复杂 甚至 烦 珊 ， 如 植物 、 动 物 、 山 水 等 目 然 环 境 ， 还 有 的 事物 
没有 外 形 ， 甚 至 只 有 抽象 的 概念 ， 比 如 气体 、 声 理 、 振 动 、 友 光 等 。 我 们 要 有 意识 地 把 这 些 事 物 的 外 形 具 
体 化 并 加 强 。 

(2) 几何 化 。 确 定 了 事物 的 外 形 后 ， 我 们 得 到 的 这 个 外 形 轮 廓 比较 烦琐 ， 也 不 规则 和 简约 ， 此 时 融 要 
在 这 个 外 形 的 基础 上 把 它 几 何 化 。 也 殊 是 使 用 炬 形 、 贺 形 、 三 角形 这 样 的 几何 图 形 , 把 不 规则 的 地 万 规则 化 ， 
把 杂乱 的 地 万 整齐 化 ， 使 图 形 看 上 去 比较 规整 或 对 称 。 

(3) 符号 化 。 几 何 化 后 的 图 形 昌 然 看 上 去 规整 但 还 是 显得 有 所 复杂 ， 不 够 简约 ， 此 时 要 在 这 个 图 形 的 
基础 上 做 减法 ， 尽 可 能 把 它 简 化 成 一 个 非 党 饱满 的 符号 或 形状 。 这 个 步骤 其 实 束 是 简约 化 的 过 程 ， 非 常 考 
验 设 计 师 的 造型 能 力 和 细节 处 理 。 

在 设计 工具 栏 图 标的 时 候 ， 能 售 控 制 好 图 形 的 轮廓 特征 也 很 重要 。 如 果 我 们 的 图 形 轮廓 边 绿 不 规整 、 
不 流畅 或 者 过 于 烦琐 ， 都 会 减弱 图 标的 视 帝 凝聚 力 和 醒目 感 。 这 里 有 一 个 比较 有 效 的 万 法 可 以 径 试 ， 融 是 
把 图 形 放 进 一 个 几何 图 形 里 面 ( 比如 正方 形 、 圆 形 或 加 角 和 矩形 等 ) 用 几何 图 形 作 为 工具 栏 图 标的 轮廓 边缘 ， 
这 样 瓯 非 单 简单 地 加 强 了 图 标的 视 竞 凝聚 力 ， 这 可 以 通过 图 8-36 体会 到 。 
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图 8-36 


iOS 平台 的 “PDF Expert”( 左 图 )、Android 平台 的 “Circl”( 中 图 ) 和 Windows Phone 平台 的 
“Mail.Ru”( 右 图 ) 


解决 了 应 用 的 图 标 问 题 , 应 用 的 用 尸体 验 设 计 终 于 完成 了 田 龙 点 睛 ,整个 项 目 似 乎 束 大 功 告 成 了 。 等 等 ， 
还 有 一 个 环 忆 别 志 了 ,我 们 在 朱 面 上 点 击 图 标 之 后 ， 并 不 是 马上 进入 应 用 程序 的 ， 往 往 需 要 等 那么 几 秒 钟 ， 
这 个 时 候 屏 副 上 呈现 的 是 应 用 程序 的 局 动画 面 。 


8.4 ”局 动画 面 和 引导 帮助 


和 大 部 分 移动 应 用 一 样 ， 当 用 尸 点 击 局 动 图 标 时 ， 等 上 那么 两 三 秒 才 能 够 顺利 局 动 程序 ， 昌 然 这 
个 时 间 并 不 算 漫 长 ， 但 是 对 充满 期 等 和 缺乏 耐心 的 用 户 来 说 还 是 反 长 的 一 段 时 间 。 因 此 ， 这 个 环 太 的 设计 
绝对 不 能 忽视 。 不 但 如 此 ， 我 们 一 定 要 珍 昼 这 两 三 秒 钟 的 时 | 间 ， 给 用 尸 留 下 更 加 深刻 、 精 彩 的 视 党 印象 。 


8.4.1 局 动画 面 


用 户 点 击 应 用 的 局 动 图 标 之 后 ， 操 作 系统 会 从 仓储 衬 
时 间 里 ， 系 统 会 移 企 屏 囚 上 抛 出 一 张 图 片 或 动画 ， 这 束 是 应 用 的 局 动画 面 。 它 通 


s 间 里 调用 并 运行 你 应 用 的 代码 ， 在 这 期 间 的 等 待 
满 你 的 整个 屏幕， 


而 内 容 通 党 是 应 用 的 名 称 、 开 友 企 业 的 logo 和 应 用 界面 中 最 具 代表 性 的 图 形 意 


在 图 8-37 中 我 们 看 到 的 是 比较 常见 的 局 动画 面 ， 它 展示 的 是 应 用 的 logo 及 名 称 ， 大 部 分 都 是 用 动 
男 的 万 式 来 展示 的 ， 并 且 设 计 和 美观 、 做 工 精 细 。 但是， 这 样 的 展示 万 法 有 些 人 并 不 赞成 。 从 1999 年 开始 ， 
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各 大 网 站 都 开始 热 囊 于 无 故 添 加 Flash 引导 动画 ， 很 多 用 户 认 为 这 是 在 故意 拖延 启动 时 间 ， 为 的 就 是 展示 
你 自己 的 logo。 因 此 ， 越 来 越 多 的 开发 者 放弃 了 这 种 启动 方式 ， 而 iOS 平台 则 引入 了 一 个 更 加 人 性 化 的 
启动 理念 。 


8-37 

应 用 启动 画面 ， 左 图 为 Android 
平台 的 “Skype”， 右 图 是 iPad 
上 的 “GT Racing” 游 戏 


|， 证 
us! BRACIMG 


乎 果 公 司 建议 把 局 动画 面 做 的 和 应 用 的 百 页 一 模 一 样 ， 只 是 没有 实际 的 内 容 ， 实 际 上 融 是 应 用 主页 的 
背景 。 这 种 万 式 会 让 用 户 以 为 已 经 看 到 了 界面 ,虽然 代码 还 没有 开始 运行 ,但 是 感觉 上 应 用 已 经 局 动 成 功 了 ， 
只 是 还 差 一 点 点 ， 正 在 努力 加 载 。 实 际 上 ， 这 会 给 用 户 一 个 局 动 非 党 迅速 的 钳 苋 ， 示 例 图 如 图 8-38 所 示 。 


人、 


图 8-38 
iPhone 上 “和 天气” 应 用 的 启动 画 
面 ( 左 图 ) 和 应 用 主页 ( 右 图 ) 
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以 上 两 种 形式 的 局 动画 面 各 有 所 长 ， 但 是 后 者 给 用 户 的 感 况 更 条 近 、 目 然 。 相 对 来 况 ， 表 者 更 像 是 企 
做 自我 介绍 或 广告 。 


8.4.2 5| 导 帮助 


应 用 局 动 完 成 后 ， 用 户 顺 利 进 入 主页 。 如 果 你 的 应 用 功能 和 直观、 操作 简便 ， 用户 一 看 丈 会 类 追 怎 么 用 ， 
但 是 有 的 应 用 功能 相对 复杂 ， 且 任务 繁多 ， 用 户 有 可 能 会 有 绎 迷惑 ， 不 知 该 从 何 下 手 ， 这 时 添加 一 些 引 导 
帮助 信息 会 很 有 用 。 

图 8-39 展示 了 两 款 应 用 的 引导 帮助 设计 。 一 般 来 说 ， 我 们 的 引导 帮助 只 在 第 一 次 或 前 儿 次 启动 应 用 
时 显示 。 这 样 的 安排 会 给 用 户 一 个 初次 见面 相互 问候 的 印象 和 感 免 ， 残 像 铺 开 了 一 个 迎 宾 地 毯 。 


» Local guide 


| | You 
[a Tube 


图 8-39 ”应 用 的 引导 帮助 信息 : iOS 平台 的 “Dcovery”( 左 图 ) 和 Android 平台 的 “YouTube” 
( 右 图 ) 


现在 我 们 终于 完成 了 一 套 完 美的 用 户 体验 设计 。 我 们 相信 你 的 作品 一 定 非 昔 精彩 ， 人 在 移动 商店 的 货架 
上 会 授 放 着 精美 的 局 动 图 标 ， 会 有 很 多 幸运 的 用 尸 购买 并 下 载 你 的 应 有 用。 现在， 我们 已 经 成 功 地 拒 上 自己 打 
造成 一 位 移动 应 用 的 用 户 体验 设计 师 。 
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224 
针对 “艺术 品 收藏 ”应 用 , 我 们 也 要 侍 图 标 设 计 和 局 动 国 面 两 个 环 万 上 做 一 个 完整 而 细致 明了 解 。 


天 于 启动 图 标 ， 我 们 行 细 其 网 之 后 ， 决 定 选 择 田家 的 一 幅 代 表 作 作为 视 移 主题 ,这 杜 有 两 点 好 处 : 一 
; 另 一 个 是 利用 己 术 品 本 身 的 视 


是 视觉 形象 独一无二 ， 绝 不 会 与 任何 一 款 应 用 的 图 标 创意 “ 挤 衫 ” 
觉 魅力 或 冲击 力 来 址 得 用 户 的 关注 ， 我 相信 喜欢 艺术 的 人 会 注意 到 它 的 与 众 不 同 。 最 终 ， 我 们 选择 了 


杨 汗 老 师 的 一 幅 代 人 表 作 小花 者 "作为 居 动 图 标的 形象 ,一 个 是 因为 这 一 作品 的 造型 元 素 比 较 中 规 中 起 、 


有 形式 感 ， 另 外 一 个 原因 是 我 买 任 是 太 喜 次 这 帼 国 了 ， 如 图 8-40 所 不。 


8-40 
艺术 品 收藏 ”应 用 的 启动 图 标 


应 用 于 iPad 桌 面 
114x114 


应 用 于 iTunes Store 
170 x 170 


图 标 原始 文件 
1024 x 1024 


根据 iOS 平台 的 要 求 , 我们 需要 把 图 标的 原始 文件 制作 成 1024 x 1024 像素 。 为 了 看 到 最 终 效 果 ， 
我 还 制 作 了 两 个 不 同 大 小 的 图 标 效 末 图 。 
天 于 局 动 男 面 ， 由 于 男 家 希 黑 我 们 拒 她 工作 至 的 信息 醒 入 进去 ， 所 以 我 们 设计 成 logo 逐渐 浮现 
自然 ， 而 且 我 们 工作 室 的 logo 也 可 以 在 启动 画面 里 露 


并 反复 消 隐 昌 动 国 效 果 ， 这 杆 的 效果 比较 合 鞋 
0 如 图 8-41 所 示 。 


8-41 
艺术 品 收藏 ”应 用 的 启动 画面 
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这 样 ， 我 们 的 “艺术 品 收藏 ”应 用 项 目 ， 从 市 场 和 用 户 分 析 、 头 脑 风 暴 的 构思 过 程 、 原 型 草图 的 
绘制 、 低 保 真 原型 的 制作 、 个 性 化 包装 和 直至 图 标 和 局 动画 面 的 设计 过 程 ， 已 经 完整 地 展现 给 大 家 了 ， 
其 目的 是 让 大 家 更 加 直观 地 理解 用 户 体验 设计 的 规范 和 流程 。 我 们 可 以 通过 App Store 搜索 “Yangart” 
来 下 载 并 把 它 安 装 企 你 的 iPad 上 ， 如 图 8-42 所 示 。 当 然 ， 这 是 一 款 免费 的 应 用 ， 我 们 也 可 以 在 视频 
网 站 “ 酷 6 网 ”中 搜索 “杨洋 作品 ”(http:/v.ku6.coryshow/pnEp-cBfohBWEf2qcqTE0g...html) 来 
观看 这 款 应 用 的 操作 演示 和 运行 过 程 。 


图 8-42 安装 在 iPad 上 的 “艺术 品 收 藏 ” 应 用 


美 中 不 帮 的 是 我 们 这 个 应 用 的 特殊 性 比较 明显 ， 题 材 略 有 些 另 类 ， 造 抱 对 个 性 化 鸭 要 求 比 较 局 。 
因此 ,人 在 下 一 和 草 里 ， 我 们 将 利用 一 个 更 有 代表 性 的 荣 例 更 加 完整 、 更 加 敏捷 化 地 再次 向 六 家 展现 完整 
的 用 户 体 骆 衣 计 过 程 。 


用 尸体 验 设计 项 目 实 战 一 一 “价格 线 ” 


随 着 对 移动 应 用 用 尸体 验 设计 的 了 解 逐 步 趋 于 全 面 和 完整 ， 我 们 也 迎 来 了 本 书 的 最 后 一 草 。 在 这 一 章 
里 ,我 们 将 通过 设计 另 一 款 应 用 “价格 线 ， 将 本 书 的 内 容 和 天 键 点 进行 一 次 串联 和 回顾 ， 使 大 家 再 次 通 
过 一 个 实 实在 在 的 守 例 ， 更 加 深入 地 对 移动 应 用 用 户 体 验 设 计 的 思路 、 济 程 和 万 法 进行 一 次 全 面 的 探索 和 
实践 。 当 然 ， 里 面 也 缠 藏 着 很 多 我 们 的 经 验 和 诀 窗 ， 相 信 大 家 能 从 中 得 到 很 多 帮助 和 局 友 。 


9.1 项 目 概 述 及 工作 计划 


这 个 项 目 是 价格 线 酒 店 预订 网 站 ( http://www.jiagexian.com/ ) 的 Android 客户 端 。 随 着 移动 互联 
网 的 友 展 ， 在 移动 设备 上 预订 和 餐馆、 酒店 等 需求 越 来 越 多 。 在 这 样 一 个 大 背景 下 ， 价 格 线 酒店 预订 网 站 与 
智 捷 东 方 团队 决定 共同 开 友 酒店 预订 Android 客户 站 。 

价格 线 酒店 预订 网 站 已 经 运行 多 年 ， 系 统 比 较 庞大 ， 信 息 涵盖 了 全 国 8000 多 家 酒店 ,而 Android 客 
户 端 不 可 能 包括 网 站 上 的 所 有 功能 。 经 过 我 们 分 析 和 讨论 ， 在 价格 线 Android 1.0 版 本 上 只 实现 最 基本 的 
与 预订 相关 的 功能 : 搜索 酒店 、 房 间 查 询 和 房间 预订 ， 以 及 关于 我 们 等 。 

接 下 来 ， 我 们 从 摘 述 项 目 及 制订 计划 开始 我 们 的 设计 。 


9.1.1 项 目 摘 述 


不 难 想 象 ， 这 个 项 目 是 一 于 标准 的 效率 型 应 用 ， 用 于 儿 助 旅行 者 在 不 同 的 城市 能 够 迅速 找到 适合 目 己 
价位 、 地 理 位 置 以 及 规格 和 环境 的 酒店 。 同 时 ， 也 适合 用 来 对 目 己 的 行程 及 住宿 进行 预先 的 规划 和 安排 。 
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当然 ,这 也 是 一 款 基于 手机 设备 的 移动 应 用 。 那么 针对 这 款 应 用 的 设计 和 开发 ,我 们 必须 在 项 目 启动 的 同时 ， 
对 整个 项 目 内 容 和 细节 有 一 个 全 面 的 认识 和 和 了解 。 同 时 ， 为 它 的 实施 过 程 制 订 一 个 合理 的 计划 。 

为 了 能 够 在 之 后 的 工作 中 保持 思路 清晰 、 明 确 ， 得 到 团队 的 配合 并 相互 协调 ,我 们 必须 在 项 目 启动 前 
认真 填写 以 下 内 容 。 

。 针对 的 移动 设备 : 手机 。 

。 应 用 类 型 : 效率 型 。 

。 针对 的 用 户 群 : 旅行 者 、 出 差 者 、 接 待人 。 

。 应 用 的 使 用 平台 : Android。 

。 应 用 设备 的 屏幕 规格 比例 : 800 x 480 像素 。 

。 项 目 开 上 友 周 期 : 4 周 。 

。 应 用 的 用 户 体 验 设计 方向 : 相对 个 性 化 。 

。 相似 的 同类 产品 : 携程 无 线 、 掌 上 航 旅 、 去 哪儿 旅行 。 

明确 了 上 述 各 条 内 容 后 ,我们 就 可 以 着 手 开 始 设 计 了 ,值得 一 提 的 是 ,应 用 的 用 户 体验 设计 方向 一 栏 ， 
似乎 有 些 抽象 ， 不 像 其 他 内 容 那 么 明确 。 其 实 这 是 我 们 在 项 目 起 始 必 须 确定 的 一 个 风格 上 的 大 方 同 ， 它 通 
常 分 为 三 大 类 : 规范 化 、 相 对 个 性 化 和 完全 个 性 化 。 它 的 确定 直接 关系 到 市 场 定位 、 素 材 收集 、 布 局 安排 
以 及 与 编程 人 员 的 事先 协调 与 沟通 等 诸多 工作 ， 我 们 不 能 只 图 视 竞 上 的 华丽 而 不 关心 编程 人 员 的 疾 吉 。 


9.1.2 工作 计划 和 流程 


拙 几 J 工作 计划 有 两 种 万 法 ， 一 个 是 以 规定 时 间 段 内 完成 的 进度 为 标准 ， 另 一 个 以 工作 流程 中 每 个 任务 
完成 的 时 间 怠 为 标准 。 为 了 使 大 家 更 加 清晰 地 了 解 完 成 项 目的 过 程 ， 这 里 我 们 选择 第 二 种 ， 也 丈 是 以 济 程 
为 主线 来 制订 工作 计划 ， 主 要 涉及 以 下 8 个 任务 。 

。 任务 一 : 市 场 定 位 及 产品 分 析 。 

。 任务 二 : 项 目的 用 户 需求 分 析 。 

。 任务 三 ; 确定 导航 万 式 和 功能 点 。 

。 任务 四 : 绘制 操作 流程 的 原型 草图 。 

。 任务 五 : 项 目的 中 保 真 原型 。 

。 任务 六 : 项 目的 可 用 性 测试 及 调整 。 

。 任务 七 : 完善 寞 面 的 个 性 化 设计 。 

。 任务 八 : 图 标 设计 及 局 动画 面 。 

有 了 了 明确 的 工作 流程 ， 我 们 融 可 以 按 部 残 班 地 开始 我 们 的 项 目 实 践 了 。 在 这 乙 前 ， 我 们 要 提醒 大 家 ， 
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有 些 步 又 并 不 是 一 次 完成 的 ， 好 的 想法 或 创意 需要 反复 推 融 、 修 改 ， 有 时 甚至 可 以 推翻 重 来 。 因 此 ， 我 们 
的 计划 并 不 是 一 成 不 变 的 ， 而 是 一 个 化 进 和 过 代 的 过 程 。 计 划 永 远 赶 不 上 变化 ， 最 终 的 目的 是 完善 我 们 的 
用 户 体验 设计 ， 而 不 是 简单 地 按 部 残 班 完成 任务 。 


9.2 项 目的 准备 阶段 
在 这 个 阶段 中 ,我 们 要 完成 计划 中 的 两 项 任务 ,分 别 是 项 目的 市 场 定位 和 产品 分 析 , 以 及 用 户 需求 分 析 。 


9.2.1 市 场 定位 及 产品 分 析 


虽然 各 大 移动 应 用 商店 中 不 乏 各 种 旅游 、 交 通 、 酒 店 预定 或 行程 安排 的 应 用 ， 而 且 大 多 功能 繁多 、 履 
盖 全 面 ， 但 是 我 们 想 要 做 的 是 一 款 操作 方便 、 简 单 易 用 、 功 能 专 一 的 高 效应 用 程序 ， 这 也 是 我 们 这 款 应 用 
的 特别 之 处 。 

在 进行 项 目 描述 的 时 候 ， 我 们 列举 了 3 款 相关 的 类 似 产品 ， 这 些 产 品 无 一 不 是 大 而 全 的 移动 应 用 。 当 
然 ， 对 相关 的 类 似 产品 的 分 析 也 是 非常 重要 的 ， 通 过 了 解 这 些 产品 ， 我 们 可 以 去 粗 取 经 ， 完 善 自 己 的 功能 ， 
强化 自己 的 优势 。 而 这 些 大 而 全 的 应 用 的 共同 缺点 融 是 操作 烦 珊 ， 层 级 复杂 ， 通 弟 需 要 长 时 间 的 摸索 和 设 
置 才 可 以 实现 操作 。 而 我 们 的 应 用 遵循 简约 至 上 的 原则 , 因此 我 们 的 优势 应 该 是 功能 专 一 , 操作 简练 、 直观 ， 
不 需要 摸索 和 研究 ， 直 达 目 标 地 进行 搜索 。 

通过 图 9-1 可 以 看 到 ， 这 三 款 应 用 的 用 户 界 面 风 格雷 同 ， 功 能 设置 上 也 大 同 小 异 。 从 图 标的 设计 上 
就 可 以 看 出 三 款 应 用 都 是 从 iOS 平台 移植 过 来 的 ， 但 却 没有 在 细节 上 进行 Android 平台 的 规范 化 修改 ， 
仅仅 替换 了 相应 的 控件 位 置 和 工具 栏 图 标 。 因 此 ， 我 们 要 在 功能 简约 的 同时 加 强 界 面 的 个 性 化 和 视觉 冲击 
力 以 及 Android 平台 的 特色 。 当 然 ， 它 们 的 优点 我 们 也 要 加 以 参考 ， 比 如 功能 全 面 、 结 构 严 谨 、 搜 索 键 鲜 
明 突 出 等 。 

那么 , 通过 上 述 对 相关 应 用 的 分 析 ， 我 们 对 自己 产品 需要 具备 的 特点 和 优势 进行 一 下 总 结 ， 具体 如 下 : 

。 功能 专 一 ; 

。 操作 方便 ; 

。 结构 简单 、 优 化 层级 ; 

。 界面 视 完 个 性 鲜明 ， 

。 具有 Android 平台 的 特色 。 

同时 ， 我 们 还 要 考虑 到 iOS 平台 或 Windows Phone 平台 的 移植 ， 因 此 界面 元 素 应 该 相对 中 性 和 易 
于 改变 ， 这 样 在 移植 的 时 候 比 较 方便 ， 避 免 重 复 设 计 。 
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| 酒店 搜索 


酒店 预订 
骨 入 住 城市 当前 位 置 > 
有 入住 城市 北京 ee 由 北京 ， 
04 同 1 ba D4 月 178 
国 大 性 日 期 今天 
其 键 字 名 /地 点 管 》 酸 自 店 勿 ,地 址 寺 » 
赂 佳 几 蝇 。 1 上 聊 。 4 昌 178( 罗 =) 二 向 
价 杆 范围 不 限 » 一 = 
价格 / 星 级 不 限 lo ‘malre’ 
下 鱼子 搜索 


9-1 Android 平台 上 3 款 有 关 酒 店 查 找 和 预订 的 移动 应 用 : “携程 无 线 〈 左 图 ) 去 哪儿 旅行 〈《 中 图 ) 和 
掌上 航 旅 ”( 右 图 ) 


9.2.2 项 目的 用 户 需求 分 析 


我 们 知道 ， 分 析 用 户 需 求 时 ， 首 先 要 从 了 解 应 用 针对 的 用 户 群 体 开始 。 在 前 面 的 项 目 朱 述 中 ， 我 们 提 
到 了 三 类 人 : 旅行 者 、 出 差 者 和 接待 人 。 接 待人 可 分 成 两 类 : 一 种 是 对 公 的 ， 比 如 政府 和 企业 接待 领导 或 
对 公 业 务 及 会 议 团 体 的 ; 另 一 种 是 对 私 的 ， 比 如 个 人 或 家 庭 接待 杀 友 的 。 

这 三 类 人 既 有 共同 点 ， 也 有 差异 性 。 旅 行者 相对 来 说 比较 天 注 性 价 比 高 、 有 折扣 的 酒店 ， 因 此 对 地 理 
位 置 并 不 是 太 挑 吻 ， 而 出 舌 者 和 接待 者 相对 来 说 比较 关心 地 理 位 置 和 交通 便利 性 ， 因 此 价格 万 面相 对 次 要 ， 
而 接待 者 往往 出 于 礼节 会 对 酒店 的 环境 和 舒适 度 更 加 天 注 。 同 时， 在 消费 档次 上 ， 旅 行者 和 对 私 接待 人 大 
多 是 个 人 行为 ， 往 往 选 择 相对 平价 的 酒店 ， 但 是 对 品牌 和 质量 比较 挑 史 ， 而 出 差 痢 和 对 公 接 待人 由 于 是 政 
奉 或 企业 行为 ， 往 往 选 择 相 对 高 端的 酒店 ， 并 且 注 重 泗 店 的 外 在 规模 和 奢华 程度 。 

通过 上 面 的 分 析 我 们 感觉 到 ， 尽 可 能 多 地 对 酒店 的 价格 、 环 境 及 服务 进行 直观 的 比较 是 我 们 这 款 应 用 
能 够 独树一帜 的 关键， 因此 在 设计 中 必须 加 强 这 万 面 的 功能 。 同时， 针对 不 同 用 尸 群体 的 委 异 性 需求 ， 我 
们 应 该 在 应 用 中 给 出 更 多 的 选项 以 满足 他 们 各 目的 需求 。 

通过 上 述 分 析 可 知 ， 我 们 在 设计 中 应 突出 以 下 几 个 万 面 的 功能 。 

。 不 但 要 有 城市 选择 ， 同 样 可 以 锁定 地 域 和 范围 。 

。 有 对 酒店 的 关键 词 、 品 牌 和 星 级 的 选择 。 


。 能 够 锁定 和 选择 价格 范围 。 
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。 能 够 直观 地 比较 价格 。 

。 有 酒店 的 图 像 信 息 ， 并 且 能 够 对 图 像 进行 直观 的 比较 。 

。 全 面 展示 酒店 房间 的 规格 和 信息 ， 并 能 够 进行 直观 的 比较 。 

。 又 持 预 订 和 订金 在 线 广 付 。 

不 过 ， 同 时 我 们 也 要 注意 ， 过 多 的 功能 会 使 界面 变 得 拥挤 ， 操 作 变 得 烦 琐 ， 降 低 了 用 尸 的 操作 体验 。 
这 也 违 育 了 我 们 在 上 一 节 所 阐述 的 应 用 操作 简练 和 功能 专 一 的 特性 ， 这 中 国 的 矛盾 需要 我 们 在 接 下 来 的 设 
计 工 作 中 进行 取舍 和 协调 。 


9.3 项 目的 创作 及 草图 阶段 


在 本 节 中 ， 我 们 需要 完成 计划 中 接 下 来 的 两 项 任务 ， 分 别 是 确定 应 用 的 导航 方式 和 功能 点 ， 以 及 绘 
制 操作 流程 的 原型 理 图 。 在 这 两 个 环节 中 ， 我 们 需要 把 应 用 的 导航 、 大 的 布局 以 及 所 有 的 功能 点 确定 下 
来 ， 并 把 操作 流程 的 整体 规划 和 设想 绘制 成 草图 。 由 于 导航 和 布局 的 确定 过 程 比 较 抽 象 ， 且 有 音 图 的 绘制 
摘 述 起 来 比较 乏味 ， 所 以 这 两 个 任务 可 以 放 到 一 起 白 述 。 下 面 我 们 移 来 看 一 下 操作 流程 的 原型 草图 ， 如 
9=2 所 示 。 

根据 前 面 的 市 场 分 析 和 功能 规划 , 我 们 选择 最 人 简约 的 列表 式 布局 作为 交互 万 式 和 界面 整体 风格 。 同 时 ， 
根据 这 个 布局 ， 我 们 选用 树 形 结 构 作为 应 用 的 导航 模式 。 

通过 图 9-2， 我 们 可 以 比较 清晰 地 了 解 到 应 用 界面 、 布 局 及 导航 的 具体 安排 。 

在 主页 “酒店 搜索 ”页面 上 ， 我 们 并 列 设置 了 5 个 搜索 条 件 的 选项 按钮 ， 分 别 是 城市 、 天 键 字 、 价 格 
范围 、 入 住 时 间 及 退 房 时 间 ， 其 中 每 个 选项 对 应 看 一 个 选择 页 面 。 当 然 ， 入 住 时 间 和 退 房 时 间 这 两 个 选项 
对 应 的 内 容 是 相同 的 ,都 是 时 间 选 择 页 面 ,直接 使 用 Android 内 置 的 时 间 播 选 控件 即 可 。 选择 完 5 项 条 件 后 ， 
点 击 “ 搜 索 ”按钮 即 可 进入 “酒店 列表 。 

酒店 列表 采用 标准 的 列表 式 布局 ,酒店 信息 包括 酒店 的 图 片 、 名 称 、 星 级 、 地 址 、 联 系 方式 及 最 低 价格 ， 
排版 采用 经 典 的 左 图 右 文 的 搭配 方法 。 这 么 多 的 信息 加 上 图 片 都 放 在 里 面 明显 有 点 拥挤 ， 但 是 只 有 这 样 才 
能 更 好 地 突出 信息 之 间 的 直观 比较 ， 这 里 融 要 考验 设计 师 的 细节 把 握 能 力 和 文字 处 理 经 验 了 。 点 击 酒店 信 
息 的 列表 项 目 ， 可 以 打开 每 个 酒店 的 “房间 列表 。 

房间 列表 ”与 “酒店 列表 类似 ， 房 间 信息 及 服务 条 款 也 比较 烦琐 ， 但 是 每 一 项 都 是 不 可 或 缺 的 ， 
其 中 包括 房型 、 价 格 、 付 款 万 式 、 早 餐 服 务 和 宽 市 服务 。 每 个 列表 项 目 里 设置 了 “预订 按钮， 点 击 它 残 
可 以 开始 填写 订单 了 。 


第 9 章 ”用 户 体 验 设 计 项 目 实战 一 一 “价格 线 ” 231 


/ 打 并 搜索 页 面 ,弹出 键盘 
个 


可 扩展 功能 


2013-—03—15 > 


亲 1000 一 半 2000 元 /天 
半 2000 一 羊 3000 元 / 天 
羊 3000 一 半 5000 元 /天 


03 


et 
2014 04 


电话 ， 
入 位 时 间 ， 


备 没 


三 
| 


图 9-2 Android 平 台 “ 价 格 线 ” 应 用 的 操作 流程 原型 草图 
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在 应 用 的 导航 栏 里 ,我 们 使 用 了 Android 平台 规范 的 导航 按钮 ,分 别 是 左 侧 的 “返回 键 ” 和 右 侧 的 “更 
多 键 。 当 然 ， Android 平台 的 移动 设备 禹 有 固定 的 返回 键 ， 因 此 应 用 界面 上 并 不 需要 设置 返回 功能 。 这 
里 的 设置 除了 方便 和 迎合 特殊 用 户 的 习惯 外 ， 主 要 考虑 了 导航 栏 的 对 称 与 美观 。 而 “更 多 键 ” 主要 是 为 了 
隐藏 帮助 文档 等 次 要 功能 ,同时 也 为 了 功能 扩展 的 方便 。 我 们 知道 ,这 各 应 用 的 主体 功能 是 对 酒店 进行 搜索 、 
比较 和 预订 ， 一 切 附加 功能 都 会 或 多 或 少 干 扰 应 用 功能 的 专 一 性 ， 变 得 不 够 纯粹 ， 因 此 我 们 用 这 个 办 法 把 
附加 的 但 又 不 愿意 舍 痉 的 功能 隐藏 在 一 个 单独 的 模块 里 ， 一 举 两 得 。 

安排 好 应 用 的 导航 、 布 局 以 及 操作 流 程 后 ， 我 们 残 可 以 打开 电脑 ， 在 图 形 软件 上 摘 绘 我 们 的 应 用 办 
面 了 。 


9.4 ”项 目的 中 保 真 原 型 及 可 用 性 测试 


在 接 下 来 的 工作 里 ， 我 们 需要 先 按照 原型 草图 制作 出 一 套 中 保 真 的 原型 文件 ， 再 利用 这 套 文件 对 应 用 
的 交互 体验 和 界面 安排 进行 可 用 性 测试 。 


9.4.1 项 目的 中 保 真 原型 


这 里 我 们 使 用 最 常用 的 电脑 绘图 软件 Photoshop 来 制作 原型 文件 。 为 了 更 加 接近 真实 的 操作 和 体验 ， 
我 们 把 图 形 文件 的 尺寸 设置 得 和 真 买 设备 的 参数 一 致 ， 其 大 小 为 800 x 480 像素 ， 同 时 认真 参考 了 Android 
平台 界面 元 泰 的 像素 大 小 规范 ， 遵 循 以 48 像素 为 单位 的 界面 设计 韵律 。 当 然 ， 在 空间 安排 、 细 市 处 理 以 
及 文子 排版 万 面 ， 我 们 同样 需要 一 丝 不 有 地 把 每 一 个 页 面 把 握 好 。 访 项 目的 中 保 真 原型 如 图 9-3 所 示 。 

由 于 制作 中 保 真 原型 的 主要 目的 是 为 了 测试 、 讨 论 和 调整 ， 因 此 无 需 过 多 地 加 入 设计 元 素 和 特效 ， 
而 是 完全 使 用 了 Android 平台 规范 的 控件 和 字体 样式 。 经 过 细心 的 编辑 和 调整 ， 效 果 还 是 比较 清晰 和 有 调 
理 的 ， 只 是 感 党 之 无 个 性 和 视 党 中 击 力 。 
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图 9-3 “价格 线 ” 应 用 的 低 保 真 原型 


9.4.2 原型 的 可 用 性 测试 及 调整 


进行 可 用 性 测试 是 一 个 非常 重要 的 步骤 。 与 测试 程序 不 同 ， 可 用 性 测试 没有 明确 的 测试 结果 ， 得 到 的 
往往 是 操作 过 程 或 细 蔬 处理 上 散乱 的 意见 和 评价 。 其 实在 整个 项 目 设计 的 过 程 中 ， 我 们 通常 要 进行 很 多 次 
测试 ， 从 原型 章 图 完成 开始 ， 几 乎 每 个 步骤 都 会 想 万 设法 地 寻找 机 会 进行 测试 ， 而 每 次 测试 的 内 容 也 会 
所 不 同 。 

在 原型 草图 阶段 ， 我 们 主要 进行 操作 流程 的 测试 ， 其 万 法 很 简单 ， 玖 是 把 每 个 原型 页 面 用 手机 上 的 相 
机 功能 单独 拍摄 ， 编 好 顺序 ， 然 后 在 图 片 浏览 器 里 左右 滑动 进行 体验 。 当 然 ， 这 样 的 粗糙 画面 用 不 着 不 相 
干 的 人 来 给 你 提 意 见 ， 团 队 内 部 简单 消化 一 下 融 足 够 了 。 

在 中 保 真 原型 阶段 ， 测 试 束 直观 很 多 了 。 秆 先 依然 是 操作 流程 上 的 测试 ， 但 是 这 次 我 们 可 以 在 电脑 上 


233 


234 


品味 移动 设计 一 一 |OS、Android、Windows Phone 用 户 体 验 设 计 最 佳 实践 


使 用 Flash 把 页 面 点 击 跳 转 的 过 程 做 成 一 个 简单 的 小 动画 ， 这 样 测试 者 像 是 真 的 在 运行 这 个 程序 一 样 。 同 
时 画面 也 比较 精细 和 完整 ， 完 全 可 以 拿 给 团队 之 外 的 人 去 寻求 莫 见 了 。 中 保 真 原型 阶段 的 男 一 个 测试 束 是 
人 体 工 程 学 万 面 的 体验 ， 这 个 必须 在 手机 上 进行 实际 的 把 控 和 操作 和 尝试， 而且 要 尽 可 能 寻求 与 项 目 不 相干 
人 员 的 帮助 ， 因 为 每 天 面 对 目 己 的 项 目 ， 心 理 上 和 视 竞 上 总 会 有 泽 先入为主 的 惯性 思维 ， 很 难 友 现 生理 习 
惯 上 的 错误 和 问题 。 价格 线 ”应 用 的 可 用 性 测试 如 图 9-4 所 示 。 


5 星 占 
3 多 大 
5 2 天 且 


3 星 圾 
Y358/ 天 居 


ea 4 星相 
pp 


图 9-4 “价格 线 ” 应 用 的 可 用 性 测试 


经 过 中 保 真 阶段 原型 文件 的 可 用 性 测试 ， 我 们 得 出 以 下 结论 。 
。 主页 内 容 略 显 空洞 ， 需 添加 元 素 进行 丰富 。 
。 列表 项 目 视觉 不 流畅 ， 需 要 加 强 F 型 视觉 引导 。 
。 部 分 按键 较 小 ， 加 大 所 有 按键 的 可 点 击 区 域 。 
。 改变 色调 ， 尽 量 与 其 他 相关 应 用 形成 对 比 。 
。 降低 信息 录入 难度 ， 将 文子 录入 改 为 选择 录入 。 
。 加 强 “ 搜 索 ”按钮 的 视觉 中 击 力 ， 以 提高 用 户 的 确认 感 。 
有 了 这 些 结论 ， 我 们 丈 可 以 放手 进行 界面 的 个 性 化 调整 了 。 
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9.5 完 秋 界面 的 个 性 化 设计 


对 界面 进行 个 性 化 设计 是 非常 需要 想象 力 和 细节 把 探 能 力 的 ， 也 是 对 设计 师 专业 水 平 最 和 直接 的 考验 。 
先 别 急 厦 给 界面 添加 元 素 ， 我 们 移 考虑 一 下 这 款 应 用 的 具体 风格 和 特点 。 


9.5.1 确定 风格 并 收集 素材 


从 低 保 真 原型 文件 上 可 以 看 到 ， 应 用 的 功能 比较 少 ， 信 息 也 不 是 非常 多 ， 在 界面 结构 上 无 法 形成 多 元 
化 的 信息 堆积 和 分 类 ,使 用 局 平 化 ”风格 会 使 界面 显得 单调 和 空洞 。 因 此 ,为 了 丰富 界面 和 增强 视觉 体验 ， 
我 们 决定 使 用 “隐喻 ”的 拟 物化 风格 。 不 过 ， 这 对 视觉 创意 和 软件 特效 的 水 准 要 求 比较 高 ， 而 且 关 键 问题 
是 隐喻 是 售 合 适 ， 能 不 能 把 视 锅 元素 运 用 得 恰到好处 ， 这 丈 需 要 我 们 在 进一步 设计 之 前 耐心 地 观察 生活 和 
收集 资料 。 

我 可 不 会 为 了 体验 生活 而 目 己 掏腰包 去 住 一 次 星 级 酒店 。 骨 说 只 住 一 次 也 没 办 法 找到 大 多 数 酒 店 在 视 
竞 元 素 上 的 共性 ， 所 以 我 收集 并 下 载 了 一 些 以 酒店 为 题材 或 背景 的 电影 和 纪录 片 《 这些 资料 还 是 比较 容易 
得 到 的 )。 同 时 ， 也 根据 需要 收集 了 一 些 图 片 资料 。 

通过 图 9-5， 我 们 可 以 感 党 到 酒店 给 人 的 视 党 印象 和 和 元素。 


图 9-5 有 关 酒 店 的 视觉 元 素 收 集 
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。 色彩 上 。 以 暖色 调 为 主 ， 大 多 是 标 色 、 红 色 和 了 明黄 色 。 

。 材质 上 。 软 包 、 布 艺 、 金 属 、 木 材 和 壁纸 。 

。 造型 上 。 复 古 ( 以 现代 派 造型 为 主 的 酒店 并 不 主流 入 典雅 、 曲 线 较 多 。 

。 元 素 。 登 记 纸 张 、 写 字 板 、 签 子 笔 、 传 唤 铃 、 门 牌 、 金 属 托盘 、 暖 光 的 台灯 和 壁灯 等 。 


9.5.2 ”隐喻 元 素 的 添加 及 个 性 化 调整 


风格 确定 、 紊 材 准备 完备 后 ， 残 可 以 开始 完善 应 用 的 界面 了 。 
在 创意 上 ， 我 们 最 终 决 定 以 皮革 质感 的 写字 板 为 应 用 界面 的 主体 
元 素 ， 这 里 我 们 选择 几 个 具有 代表 性 的 页 面 来 与 大 家 分 享 设计 
过 程 。 

目 先 肯定 是 主页 。 通 过 前 面 的 素材 分 析 ， 这 里 我 们 选择 暖 黄 
色调 的 软 包 布 艺 为 背景 ， 以 标 色 皮草 质感 的 文件 夹 元 素 为 导航 栏 
的 样式 ， 在 上 面 放置 一 灵 手 亦 卷 色 的 纸张 ， 作 为 我 们 的 操作 界面 。 
通过 图 9-6 我 们 可 以 看 到 设计 效果 ， 其 中 色调 还 是 比较 统一 的 。 
为 了 放大 点 击 区 域 ， 我们 把 导航 栏 上 的 两 个 控件 都 往 中 间 移 动 了 
一 些 ， 并 且 使 用 金属 纽扣 的 效果 使 它们 突出 ， 既 精 臭 ， 又 提高 了 
所 击 的 精确 度 和 确定 感 。 为 了 与 这 两 个 圆 形 的 纽扣 呼应 ， 我 们 把 
搜索 键 也 设计 成 了 圆 形 ， 并 将 其 放置 在 整个 页 面 最 适合 大 拇 扣 点 
击 的 区 域 中 ， 其 中 同样 以 金属 质感 的 “传唤 铃 ” 作 为 隐喻 元 素 。 

由 于 页 面 元 素 较 少 ， 同 时 为 了 导航 万 便 ， 我 们 用 水 印 的 万 式 
在 下 面 加 入 了 页 面 的 英文 名 称 。 同 时 ， 为 了 不 让 文字 显得 蛙 调 ， 
在 这 里 有 意 制 作 了 一 个 咖啡 杯 留 下 的 痕迹 。 这 个 非常 生活 化 的 小 细 世 在 我 们 团队 里 引起 了 很 大 的 和 争论， 有 
的 人 认为 添加 这 个 痕迹 使 界面 要 得 脏 乱 ， 有 人 认为 很 有 情调 而 且 看 上 去 温馨 民意 ， 还 有 人 认为 这 会 让 用 户 
竞 得 目 己 很 马虎 ， 可 是 马虎 也 是 一 种 生活 态 大 …… 最 终 我 们 还 是 把 它 保留 了 下 来 ， 让 用 户 和 读者 来 评价 吧 。 

接 下 来 是 相对 重要 的 “酒店 列表 ”页 面 ， 如 图 9-7 所 示 。 为 了 加 强 列 表 布 局 “F ” 型 的 视 沉 体验， 我 
们 为 每 一 个 列表 项 目 加 入 了 粘性 标签 纸 的 压 图 以 把 它们 有 效 分 割 开 来 ， 并 为 每 幅 酒 店 的 图 片 加 上 了 日 边 ， 
这 样 束 体 看 上 去 很 像 相册 里 的 照片 收藏 和 文子 记录。 和 而且， 每 一 张 粘性 标签 纸 的 右 侧 都 是 再 起 的 ， 这 会 增 
强 用 户 的 点 击 欲 型 。 

最 后 是 “房间 明细 ”页 面 ， 如 图 9-8 所 示 。 为 了 与 “酒店 列表 ”页面 区 分 开 ， 我 们 还 是 恢复 了 纸张 
印刷 的 效果 ， 这 样 能 够 在 视 竞 上 形成 对 比 ， 而 且 看 上 去 干净 利索 。 所 有 页 面 的 导航 栏 标题 字体 一 律 使 用 了 


9-6 “价格 线 ”应 用 的 主页 面 
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标准 的 “微软 雅 黑 ， 正 文 内 容 使 用 了 汉 仪 的 “中 等 线 ” 字体 ， 这 两 种 字体 都 属于 黑体 字 ， 因 此 在 视觉 上 
比较 统一 ， 与 Android 平台 的 风格 也 比较 接近 。 


Ti 
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图 9-7 “价格 线 应 用 的 “酒店 列表 ”页面 图 9-8 “价格 线 应 用 的 “房间 明细 ”页面 


应 用 界面 设计 的 完成 标志 着 我 们 项 目的 创意 和 设计 部 分 接近 了 尾 下 ， 最 后 一 项 任务 残 是 应 用 图 标 和 局 
动画 面 的 设计 了 。 


9.6 ”应 用 图 标 和 启动 画面 设计 


越 是 接近 尾声 ， 残 越 需 要 精心 考虑 、 画 龙 点 睛 ， 因 此 ， 对 设计 师 的 考验 瓯 越 深入 。 对 于 任何 一 于 应 用 
来 说 ， 应 用 图 标 和 局 动画 面 都 是 最 需要 精 雕 细 琢 的 “脸面 。 


9.6.1 ”应 用 图 标的 创意 和 设计 


对 于 应 用 图 标的 创意 , 我 们 的 想法 是 迎合 应 用 界面 上 的 生活 化 气 妃 ,表现 在 旅途 中 到 达 目 的 地 的 情景 。 
为 此 我 们 做 了 很 多 讨论 和 头脑 风暴 ， 最 终 决定 以 旅行 箱 作 为 画面 的 主体 意象 。 接 下 来 ， 我 们 收集 了 很 多 旅 
行 箱 和 旅行 目的 地 的 照片 ( 如 图 9-9 所 示 )， 有 几 只 老式 、 古 朴 的 手提 箱 样式 吸引 了 我 们 ， 因 为 它们 看 上 
赤 与 界面 的 风格 很 搭配 。 而 目的 地 ， 我 们 选择 了 海边 的 景象 ， 一 个 是 可 以 离间 天涯海角 ， 另 一 个 原因 是 蓝 
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色调 与 淡 标 、 土 黄色 调 形成 了 强烈 的 对 比 色 。 


在 图 标 设计 的 过 程 中 ， 把 两 个 对 比 强烈 的 色调 放 在 一 起 的 好 处 是 可 以 产生 比较 强烈 的 视 完 印象， 使 它 
从 众多 的 图 标 里 脱 亲 而 出 、 吸 引 眼 球 ， 而 且 无 论 缩小 到 任何 程度 都 可 以 被 识别 出 来 。 构 图 上 米 用 了 中 规 中 
炬 的 正面 造型 ， 容 易 给 用 户 留 下 简约、 朴实 的 印象 。 通 过 图 9-10 所 示 的 图 标 制作 过 程 图 解 ， 我 们 与 大 家 
分 享 了 一 些 创作 和 制图 的 经 验 。 


1 


图 9-10 
“价格 线 ” 应 用 的 图 标 制 作 过 程 图 解 
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为 了 今后 在 各 个 平台 间 移 植 万 便 ， 我 们 通常 先 把 图 标 设 计 成 较 大 尺寸 的 磁 贴 ， 也 丈 是 正方 形 ， 然 
后 再 根据 平台 的 特点 把 边 绿 修饰 成 不 同 大 小 的 圆 角 。 图 9-11 殊 是 根据 Android 平台 图 标的 规 学 特点 ， 
在 图 9-10 的 基础 上 进行 的 修饰 


图 9-11 
价格 线 ” 应 用 的 启动 图 标 


9.6.2 ”应 用 的 局 动画 面 设计 


天 于 局 动画 面 的 设计 ， 我 们 采用 与 主页 面 呼应 的 办 法 ， 这 样 可 以 使 局 动 过 程 显得 比较 流畅 。 在 形象 设 
计 上 采用 登记 乱 皮 章 封 面 的 创意 作为 隐喻 ， 同 时 把 企业 logo 元 素 设 计 成 金属 纽扣 的 效果 与 主页 面 上 的 金 
属 材质 相 呼应 ， 其 最 终 效 果 如 图 9-12 所 示 。 


图 9-12 
价格 线 ” 应 用 的 启动 图 标 
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这 样 整个 “价格 线 ” 项 目的 设计 工作 残 完 成 了 ， 接 下 来 束 是 要 把 所 有 的 元 素 分 别 保 存 成 移动 设备 的 
兼容 文件 ( 通常 是 PNG、GIF 和 JPEG 格式 )， 与 每 个 页 面 的 效果 图 一 起 交 给 我 们 的 应 用 编程 人 员 ， 如 
图 9-13 所 示 。 


图 9-13 “价格 线 ” 应 用 的 桌面 启动 图 标 ( 左 图 )、 主 页 面 ( 中 图 ) 及 酒店 列表 页 面 ( 右 图 ) 


作为 用 尸体 验 设计 师 ， 我 们 的 实际 职责 只 能 到 这 一 步 了 ， 接 下 来 的 工作 主角 芍 怕 是 编程 开 友 人 员 了 。 
当然 ， 他 们 的 工作 也 需要 我 们 的 帮助 和 支持 ， 一 定 要 与 他 们 认真 沟通 ， 尽 可 能 使 他 们 理解 你 的 想法 、 创 蕊 
和 细 万 上 的 用 意 。 

我 们 相信 ， 现 在 的 你 已 经 成 为 一 名 目 信 的 移动 应 用 用 户 体验 设计 师 了 ， 不 出 意外 的 语 ， 你 会 成 功 地 设 
计 出 目 己 的 完美 作品 ， 在 这 个 移动 应 用 设计 的 舞台 上 尽 显 你 的 光彩 。 本 书 的 初 囊 融 是 硕 望 更 多 的 朋友 能 进 
入 到 这 个 行业 中 来 ， 成 为 我 们 的 同行 。 众人 捧 深 火焰 高 ， 让 我 们 一 起 冲破 茜 铀 ， 大 胆 创新 ， 把 用 户 体 验 


设计 变 成 举世 瞩目 的 旺 峰 领域 。 
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若 有 与 作 意向 ， 请 联系 我 : 
wangjh.turing@gmail.com 


新 浪 微 博 @ 图 灵 小 花 


自从 移动 互联 网 的 潘多拉 广 盒 被 乔布斯 打开 之 后 ， 人 们 对 移动 互联 网 的 认 知 与 体验 不 
断 被 创新 的 设备 .技术 .应 用 .游戏 所 激发 和 改变 ,传统 的 设计 方法 和 理论 不 断 被 颠覆 ， 
开发 者 们 只 有 顺应 不 断 发 展 的 体验 创新 潮流 才 可 能 满足 用 户 持续 变化 的 需求 ， 开 辟 一 
条 崭新 的 设计 之 路 ， 让 这 本 书 来 伴随 我 们 一 起 品味 移动 应 用 设计 吧 。 

王 军 ，Testin 云 测 联合 创始 人 、CEO 


在 写 完 《就 这 么 简单 : Web 开发 中 的 可 用 性 和 用 户 体验 》 一 书 之 后 ， 我 一 直 想 再 写本 
关于 移动 互联 网 产品 设计 的 书 。 不 过 在 读 完 《品味 移动 设计 》 之 后 ， 我 觉得 自己 好 像 
已 经 没什么 可 写 的 了 。 这 本 书 涵盖 i103、Android 和 Windows Phone 三 大 平台 ， 从 产品 
最 开始 的 原型 设计 、 交互 范式 .设计 规范 到 个 性 化 的 视觉 设计 和 图 标 设计 , 由 点 及 面 ， 
陪伴 读者 贯穿 移动 互联 网 的 整个 产品 设计 流程 。 更 加 难得 的 是 ， 作 者 在 描述 Wi 
鲜明 的 方向 : 做 更 有 价值 的 应 用 . 独树一帜 的 应 用 , 而 不 是 单纯 追求 外 表 华丽 或 者 

全 ”的 产品 。 用 户 体验 的 价值 不 在 于 一 味 满足 用 户 ， eile 
深刻 理解 之 上 。 

向 怡 宁 《Mess) ， 麦 步 联 合 创始 人 、 产 品 总 监 


移动 互联 网 在 短 短 几 年 里 的 用 户 总 量 已 经 远 远 超过 积累 了 几 十 年 的 PC 端 ， 移 动产 品 

的 设计 也 被 推 到 了 浪潮 之 尖 。 太 多 人 面 对 如 此 新 奇 的 世界 还 在 适应 期 ， 很 难 做 出 好 的 

Co 移动 产品 ， 此 时 《品味 移动 设计 》 一 书 应 运 而 生 。 这 是 一 本 讲述 如 何 真 正 从 理论 结合 
实践 进行 移动 产品 设计 的 图 书 ， 值 得 移动 产品 设计 人 员 阅 读 参考 | 

曹 亚 莉 ，51CTO 博客 、51CTO 视频 课程 负责 人 
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